CSS & browser compatibilty 2

[caffrinho]

Argh, i'm going 'round in circles, please help.

I'm having difficulty with the layout/appearance of certain aspects of my site with different browsers. If anybody can point me in the right direction, i'd be grateful!

This is my site

http://www.gscarter.co.uk/swss

(there are many like it, but this one is mine!)

Issues with IE6/Win:
The site navigation links along the top of my site should have a border along the bottom. Indeed, they used to. (not sure what i changed to cause this.) The forum page they look as expected! (It's the only page that doesn't use an include for the header)

Firefox/Win&Mac:
On the links page, my footer div gains a mind of it's own! Not sure what is causing it. Have tried everything i can think of, and the only thing that seemed to fix it was to remove the div that contains the links.

<div id="links">
  <ul>
     ...
  </ul>
</div>

<div id="footer">
</div>

I can't see why that (removing div id links) should affect my footer, but then i am fairly new to this!

Besides, this is not an acceptable fix for me, so if anybody knows why this is happening and a better way to fix it.....again i'd be grateful!?!?

 

[ChrisHunt]

If you haven't got it already, download the Web Developer extension for Firefox:

http://www.chrispederick.com/work/firefox/webdeveloper/

.

One of the (many) things it lets you do is click on a bit of your web page and get it to display the CSS rules that apply to it. It can be very useful when debugging pages, though I haven't had any immediate success with it on yours.

One thing I'd try is removing all the relative positioning from your style sheet - it doesn't appear to be doing anything that you can't do with simple margin declarations, and may be what's confusing matters.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

Ok, I can see a couple of errors here:

For FF, the solution is simple. Everything in the links page is floated (<li>s and <img>s) and nothing is cleared, thus the page does not have any elements in normal flow and footer resides right after the last element within the normal flow. I would change this by trying to do this:

#links ul li {
  clear: both;
}

#links ul li ul li {
  float: left;
}

It's not tested but it might work.

For IE, I don't know (because debugging in IE is much more difficult than Mozilla). You also have width set to 100px on top menu which won't work in regular browsers, because <a> is an inline element and cannot have implicitly set width. Also, IE might not support outset style for border, not sure on that one though. Also, the forum page looks exactly the same (navigation wise) as the rest of the pages in IE for me. I will look further later and get back to you.

 

[caffrinho]

OK, i seem to have fixed (!!) the Firefox problem. Not sure how, but tweaking the div tags a little has seemed to sort it!

IE; you say that the forum page is the same. That'd be my fault. I really should learn to stop changing things when i've asked for help! I've put that page back as it should be/was.

I've removed the width property from the top menu, and the relative positioning.

Thanks for the plug-in Chris, very handy!

 

[caffrinho]

i failed to mention that i'm still having a problem with my border-bottom in IE!

i've changed it from outset to solid, just in case, to no avail.

Like i said, i've put the forum page back as it was, so you can see the difference.

the code from the forum page is as follows:

<style type="text/css">
<!--
     #mainlink{
          font-family: Trebuchet MS, Verdana;
          color:#555555;
          position:relative;
          margin:0 0 0 0;
          top:0;
          left:0;
          background:transparent;
          width:900px;
          height:50px;
      }


      #mainlink ul
      {
          font-family: Trebuchet MS, Verdana;
          color:#555555;
          list-style:none;
          color:#DD0000;
      }

      #mainlink ul li{
          float:left;
          white-space: nowrap;
          padding: 0 10px 0 0;
          color:#770000;
      }

      #mainlink a{
          text-decoration:none;
          color:#646464;
          border-left:  10px solid #EE0000;
          border-bottom:  1px solid #EE0000;
          width:100px;
          padding: 0 10px 0px 10px;
      }

      #mainlink a:hover{
          text-decoration:none;
          color:#646464;
          border-left:  10px outset #EFA4A4;
          border-bottom:  1px outset #EFA4A4;
          background:#EEEEEE;
          color:#000000;
      }
</style>
...
  <div id="mainlink">
    <ul>
      <li><a href="/SWSS/index.php">Home</a></li>
      <li><a href="/SWSS/service.php">Service</a></li>
      <li><a href="/SWSS/accessories.php">Accessories</a></li>
      <li><a href="/SWSS/links.php">Links</a></li>
      <li><a href="/SWSS/carsales.php">Car Sales</a></li>
      <li><a href="/SWSS/forum/">Forum</a></li>
      <li><a href="/SWSS/contact.php">Contact Us</a></li>
    </ul>
    <img src="/SWSS/pics/nav_logo.gif" />
  </div>

like i said, i cannot see the difference between that (which works), and the rest of the site that doesn't!!!!!

Thanks for your input

 

[Vragabond]

Ok. Why does it work on forums page and not on the rest? Forum page does not have a complete doctype, others do. So, forum pages won't help us, since we want complete doctype. Now, let's get fixing.

There is no bottom border because it is cut off by the <li> element, which is not high enough. Don't really ask me why, or what IE thinks it is doing, but it is doing exactly that. How to fix it? Easy, add height to <li> element (solution won't mess up presentation in Mozilla FF):

#mainlink ul li {
      float: left;
      white-space: nowrap;
      padding-right: 10px;
      color: #770000;
      [b][COLOR=blue]height: 25px;[/color][/b]
}

Strange, huh?

 

[caffrinho]

Thank you very much! Here, have a star!

(and one for Chris for the FF Plugin.)

I must admit that my head has been spinning trying to understand the intricacies of CSS.