• NudeCelebForum has been moved from the vBulletin to the XenForo platform.
    For additional information, see: NCF Moved To XenForo
  • New threads will not be visible until approved by a moderator.

  • Welcome to the forum!
    You must activate your account in order to post and view all forum content
    Please check your email inbox & spam folders for our activation email, then follow the link to validate your email address.
    Contact Us if you are having difficulty posting or viewing forum content.
  • You are viewing our forum as a guest, with limited access.
    By joining you will gain full access to thousands of Videos, Pictures & Much More.
    Membership is absolutely FREE! Registration is FAST & SIMPLE.
    Register Today to join the first, most comprehensive and friendliest communities of nude celebrity fans on the net!

I need help with HTML + CSS

-KA-

Staff Alumn
Joined
Sep 15, 2006
Messages
12,379
Reaction score
40,211
Hello, I'm -KA-, maybe some of you know me or at least seen me around.

I've got a problem, again. :nuts:

I'm currently creating a website, but I've got this problem, that my website looks good with FF, but is buggy with IE.

I understand that to fix this problem I must add this (below) to my HTML code and create a new IE.css file.

Code:
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css"/>
<![endif]–>

To clear things up:

This is how the problematic place looks using FF



And this is how it looks using IE



This is HTML code of the "problem"

Code:
<ul id="navlist">
      <li><a id="n1" href="index.html">Esileht</a></li>
      <li><a id="n2" href="oigusaktid.html">Õigusaktid</a></li>
      <li><a id="n3" href="kultuursport.html">Kultuur ja sport</a></li>
      <li><a id="n4" href="valitsus.html">Vallavalitus</a></li>
      <li><a id="n5" href="asutused.html">Asutused</a></li>
      <li><a id="n6" href="galeriid.html">Galeriid</a></li>
      <li><a id="n7" href="kontakt.html">Kontakt</a></li>
    </ul>

This is the CSS:

Code:
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 777px;
	top: 225px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;
	background-image: url(pildid/nupp.gif);
	height: 20px;
	width: 91px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
#navlist a:hover{background-image: url(pildid/nuppyle.gif);}
#n1{left: 0px;}
#n2{left: 111px;}
#n3{left: 222px;}
#n4{left: 333px;}
#n5{left: 444px;}
#n6{left: 555px;}
#n7{left: 666px;}
#leftside{
	float: left;
}

How to write the CSS code to make it work with IE aswell?
 

C0BRA

The Rise of Member
Joined
Jan 31, 2008
Messages
192
Reaction score
340
fuck ie

sorry not much help. I would think a 2nd css just for ie isn't necessary. I've never seen a menu done with a list before, usually a table or strictly relative position css. sorry I'm not thorough or expert enough to post code.
 

Cman

Exp0sed Board Member
Staff member
Staff Alumn
Joined
Oct 19, 2003
Messages
4,281
Reaction score
599
IE is gay. Always has been and always will be. Its true that you do need to have IE specific "fixes" on occasion. The other option is to just make a table, then it should work.

Yes, I know, tables are old school and every other webmaster yells at me when I mention using them. But tables take 2 seconds to make and saves you from spending a week getting your CSS to work in IE.
 

-KA-

Staff Alumn
Joined
Sep 15, 2006
Messages
12,379
Reaction score
40,211
Yes, I guess you're right. I will use the table version, at least in IE it looks better, but still not perfect.

Maybe you can help:

As you know I wanted it too look like this:



But mine looks like this:


I set table border to 0 px, but why is there still the white space.

Code:
#tabel td{
      background-image: url(images/button.gif);
      width: 111px;
      height: 26px;
      border: 0px;
      text-align: center;
      color: #fff;
      text-decoration: none;

}
#tabel  a{
	text-align: center;
	color: #fff;
	text-decoration: none;
}

#tabel td:hover{background-image: url(images/buttonover.gif);}

How can I lose the spaces.

Hover still does not work with IE, but works wiht FF, but fuck that shit.
 

Cman

Exp0sed Board Member
Staff member
Staff Alumn
Joined
Oct 19, 2003
Messages
4,281
Reaction score
599
table padding defaults to 1, if not specified. is that the prob?

<table cellpadding=0 cellspacing=0>
 

GrapJ

Balki Bartokamus
Joined
Sep 12, 2006
Messages
1,338
Reaction score
2,540
I miss "bordercolor=blue"

or you may have to set a Backgroundcolor (bgcolor=blue)
 

-KA-

Staff Alumn
Joined
Sep 15, 2006
Messages
12,379
Reaction score
40,211
lol you miss it :D

bgcolor=blue would have made it look ugly.
 

GrapJ

Balki Bartokamus
Joined
Sep 12, 2006
Messages
1,338
Reaction score
2,540
sorry, i deleted the message because you said it already worked.

You could use the command "bordercolor=" ; i only added a color to explain, however you should/could use the color in the buttons using "#FFFFFF" (a color like this always has 6 (six) digits/numbers.)
 

Cman

Exp0sed Board Member
Staff member
Staff Alumn
Joined
Oct 19, 2003
Messages
4,281
Reaction score
599
it wasn't a border problem, it was a padding problem.
 

baal

Registered User
Joined
Jan 29, 2005
Messages
2
Reaction score
0
It looks like your li items are positioned correctly just their width is wrong. I see that you set their with in the <a> element and in FF it looks like the width is 91+10+10 with the padding while in IE it looks like the width is just 91. I remember from 2 years ago when I was unfortunate enough to do web programming that IE and FF do the layout of the elements differently but I just can't remember what was the difference. Try to set the padding to 0 and use just the width to size the elements properly. I'm too lazy to actually try it but I hope it might help you, even that now you have solved your problem with the table solution. Oh and because of that padding the Kultuur... is not actually centered it is slightly to the right. In the left of the text you have the 10px padding but it is just not enough space to put the 10px padding to the right and still fit in 111px...
 
Top