CSS Help! :) 1

[PaulinKC]

I am playing around with CSS and I am having a problem with a class not displaying properly in Firefox, but does display in IE 6 and 7 just fine.

The site in question is ->

http://www.infini-source.com/test_site/test.php

The CSS file is ->

http://www.infini-source.com/test_site/test.css

The way that it displays in IE is the way that I would like for it to display in Firefox. Any ideas what is causing the difference in display? I have been playing with the css code for the past couple of days now and haven't found a workable solutions. Any help would greatly be appreciated!

Thanks,

Paul

 

[traingamer]

Add a full document type to the file. See recent post: thread215-1346966.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[monksnake]

Your "tabs" are anchors within spans. In order to maintain a specific width, like I see you try to in your css, put the anchors within divs and make your anchors display:block. What I'm saying will fix the width on your anchors, but it won't fix the entire page. I have a feeling that if you put a docType in your file, it's going to look more messed up on IE. But to fix it will help you program more standard compliant.






<.

 

[PaulinKC]

I put the doc type in... not sure how I missed that, but thanks for reminding me...

The display:block; works but each "tab" is displayed ontop of eachother... I know this is probably something simple, but for the life of me I can't figure out what I am doing wrong.

 

[monksnake]

float all the tabs left except for the first one.

<.

 

[ca8msm]

You might also consider using a list for your menu as essesntially that is what they are:

http://css.maxdesign.com.au/listamatic/

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[PaulinKC]

Well I floated all but the first tab to the left and didn't get the look I was looking for, so I floated all of them. Now it looks correct in Firefox, but not IE... lol geez, does IE's implementation of CSS drive anyone else nuts?

 

[monksnake]

You might also consider using a list for your menu as essesntially that is what they are

That's what I personally would do, and I'd also try to cut out as much position:absolutes as I could.



<.

 

[PaulinKC]

That's what I personally would do, and I'd also try to cut out as much position:absolutes as I could.

Why would you cut out the position absolutes?

 

[monksnake]

It's considered bad practice, and in the case of your website, you have 8 layers of screen size divs being drawn on your screen and when I try to resize it, it lags. If you created an image of your background and put it as the body background, your page will load and operate 100 times faster.

<.

 

[PaulinKC]

Ok, I've been playing with my tabs for the past hour or so and I have one last question.

http://www.infini-source.com/test_site/test.php

If you view the page in IE, you'll see the About tab is flush with the bottom border. But if you view it in Firefox, the About tab and all other subsequent tabs are to the more towards the right side. Why is that?

Sorry for all of the questions, I'm just trying to learn CSS properly.

 

[Vragabond]

As you know, lists are by default a little bit indented compared to the rest of the text. In order to achieve that indent, browsers use different techniques. FF uses padding-left: 40px on the <ul> element and IE uses margins. Since you change the margin, IE's indentation is nullified but not FF's. If you want to remove FF's indentation, you need to add [tt]padding-left: 0;[/tt] to your ul (#navlist).

 

[monksnake]

I went and made a test page based on your page PaulinKC.

I'll paste what I have. (The background to the div id="layer2" is just a picture of your background)


CSS:

body {
   margin:0px;
   background:url('[URL unfurl="true"]http://www.infini-source.com/test_site/images/bg.jpg')[/URL] repeat-x top left #ffffff;
}


div#navlist {
   position:relative;
   left: 425px;
   top:47px;
   width:400px;
}

ul#navUL {
   list-style-type:none;
   margin:0px;
   padding:0px;
}

ul#navUL li {
   float:left;
   margin:0px;
   padding:0px;
}

div#navlist ul li a {
   background:url('[URL unfurl="true"]http://www.infini-source.com/test_site/images/nav-bg.jpg')[/URL] #ffffff;
   text-decoration:none;
   font-size:8pt;
   padding-top:8px;
   color:#000000;
   width:90px;
   border-left:solid 1px #999999;
   border-right:solid 1px #999999;
   text-align:center;
   display:block;
}


div#navlist ul li a:hover {
   color:#ffffff;
   text-decoration:underline;
   border-right:4px solid #ffffff;
}

div#layer2 {
   width:945px;
   height:945px;
   background:url('bg.gif') no-repeat top left;
   margin:20px auto;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" href="test.css" type="text/css">
</head>

<body>
<div id="layer2">

<div id="navlist">
   <ul id="navUL">
      <li><a href="javascript:void(0)">About</a></li>
      <li><a href="javascript:void(0)">Services</a></li>
      <li><a href="javascript:void(0)">Contact</a></li>
      <li><a href="javascript:void(0)">Tell A Friend</a></li>
   </ul>
</div>

</div>
</body>

</html>

This looks exactly like what you want your page to look like in both FF and IE6.

<.