CSS problem in IE *SOLVED*

For help and advice about coding

Moderator: Tech Moderators

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

CSS problem in IE *SOLVED*

Postby DJ » Tue Sep 15, 2009 10:24 am

I say IE, because it looks totally fine in my IE8. Not sure the version of this browser.

The menu looks like the attached, which looks like nothing I've seen on any of my test browsers. Can someone look at what's going on please and tell me where I'm going wrong? It's supposed to be a straight line, not staggered.
The width of the main content is 1000px.

doctype:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


menu html, just beneath the <body>. It's not nested inside any other <div> Selected menu items have a seperate id attached so the colour stays on the page selected:

Code: Select all

<div id="menu">
   <ul>
                <li><a href="index.html" title="" id="homeselected" accesskey="1">home</a></li>
      <li><a href="about.html" accesskey="2" title="">about</a></li>
      <li><a href="consultation.html" accesskey="3" title="">consultation</a></li>
      <li><a href="contact.html" accesskey="4" title="">contact</a></li>
      <li><a href="links.html" accesskey="5" title="">links</a></li>
   </ul>
</div>


the css for the menu, which is like it is because it's the only way I know how. I'm open to suggestions on making this better:

Code: Select all

#menu {
   background-color:#none;
   width: 500px;
   height: 27px;
   margin: 0px auto;
   font-size:10px;
   padding-left:500px;
   padding-right:0px;
}

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

#menu li {
   display:block;
}

#menu a {
   display: block;
   float: left;
   width: 100px;
   padding: 7px 0px;
   text-align: center;
   text-decoration: none;
   text-transform:lowercase;
   font-weight: bold;
   background: #000000;
   color:#ffffff;
}

#menu a:hover {
   background: #ffffff;
   color:#000000;
}

a#homeselected {
   background: #ffbd11;
   color: #000000;
}
a#aboutselected {
   background: #7b0009;
   color: #000000;
}
a#consultationselected {
   background: #a2ce54;
   color: #000000;
}
a#linksselected {
   background: #ff3b1c;
   color: #000000;
}
a#contactselected {
   background: #c77b38;
   color: #000000;
}


Should I have this as inline instead of block?=

Code: Select all

#menu li {
   display:block;
}


It's impossible for me to test because it looks perfectly fine on everything I've got, but then I'm up to date. Why don't people update! It's free ffs!
Attachments
7vh9xie6.jpg
screen shot

User avatar
Blak
Tech Moderator
Posts: 1759
Joined: Mon Mar 19, 2007 12:07 pm
Tag: Hasn't realised that there are custom ranks yet
Contact:

Re: CSS problem in IE

Postby Blak » Tue Sep 15, 2009 10:34 am

Not got the time to debug this myself, but you can use IETester to test in IE6 and IE7 (and 5.5 as well but nobody cares about that).

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

Re: CSS problem in IE

Postby DJ » Tue Sep 15, 2009 6:51 pm

Fixed it. My suspicion was correct and I've altered it and now works.
I'll check out that link Blak, thanks.

User avatar
Ward
Posts: 2275
Joined: Sun Mar 18, 2007 5:13 pm
Tag: ಠ_ಠ
Contact:

Re: CSS problem in IE *SOLVED*

Postby Ward » Thu Sep 17, 2009 6:36 pm

After careful analysis, I conclude that your problem with IE is....


IE.


Don't support it. Redirect all IE users to www.opera.com or www.mozilla.org

DO IT NAO
Rabid Opera Fanboy
Image

User avatar
RB
Posts: 10687
Joined: Sun Mar 18, 2007 3:27 pm

Re: CSS problem in IE *SOLVED*

Postby RB » Thu Sep 17, 2009 6:40 pm

Redirect them to tubgirl.
A slight majority of a statistically worthless sample size agree.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 1 guest

cron