Problems with CSS styling of tabs in IE? [Archive]

View Full Version : Problems with CSS styling of tabs in IE?

frustrated_webmaster

06-25-2008, 08:57 PM

I've adapted some CSS code from the drop-down tabs on this site (http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm) for the website I'm working on, to put in some (non-drop-down) tabs at the top of my page.

Please see below for the CSS and HTML code.

Everything works absolutely fine in Firefox (the tabs should be ordinarily white on a green background, apart from the selected tab, which should be green on a white background. Then, as you hover over other tabs they should also become green on a white background, same as the selected tab).

My problem is that in IE, the selected tab becomes white on a white background, and the green text only appears when the tab is being hovered over! Can anyone explain this or give me some way of fixing it?

The CSS (as far as I can see - or maybe I am missing something obvious?) directly specifies that the selected link and the link being hovered over should both be green on a white background, so I don't understand why IE is ignoring the green text command for the selected links and displaying it as white.

Any responses would be very much appreciated!!

Thanks,
E.

-----------------------------

The CSS code is as follows:

.halfmoon{ margin-bottom: 1em; }

.halfmoon ul{
padding: 5px 8px 5px 8px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.halfmoon li{ display: inline; margin: 0; }

.halfmoon li a{
text-decoration: none;
padding: 5px 8px 5px 8px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
color: #FFFFFF;
font-size: 13px;
background: #7cac00;
}

.halfmoon li a:visited{
color: #FFFFFF;
}

.halfmoon li a:hover, .halfmoon li.selected a{
background-color: #FFFFFF;
color: #7cac00;
}

The HTML code is as follows:

<div id="moonmenu" class="halfmoon">
<ul>
<li><a href="home.htm">Home</a></li> 
<li><a href="events.htm">Events</a></li> 
<li><a href="raids.htm">Raids</a></li> 
<li><a href="casino.htm">Casino</a></li> 
<li><a href="totals.htm">Money Raised</a></li> 
<li><a href="charities.htm">Charities</a></li> 
<li><a href="links.htm">Links</a></li> 
</ul>
</div>

rangana

06-26-2008, 01:47 AM

No, it does'nt occur on the code you've provided. I can't reproduce the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.halfmoon{ margin-bottom: 1em; }

.halfmoon ul{
padding: 5px 8px 5px 8px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.halfmoon li{ display: inline; margin: 0; }

.halfmoon li a{
text-decoration: none;
padding: 5px 8px 5px 8px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
color: #FFFFFF;
font-size: 13px;
background: #7cac00;
}

.halfmoon li a:visited{
color: #FFFFFF;
}

.halfmoon li a:hover, .halfmoon li.selected a{
background-color: #FFFFFF;
color: #7cac00;
}
</style>
</head>
<body>
<div id="moonmenu" class="halfmoon">
<ul>
<li><a href="home.htm">Home</a></li> 
<li><a href="events.htm">Events</a></li> 
<li><a href="raids.htm">Raids</a></li> 
<li><a href="casino.htm">Casino</a></li> 
<li><a href="totals.htm">Money Raised</a></li> 
<li><a href="charities.htm">Charities</a></li> 
<li><a href="links.htm">Links</a></li> 
</ul>
</div>
</body>
</html>

Show us your whole code or better a link.

frustrated_webmaster

06-26-2008, 09:58 AM

I can't show you a link (as I don't yet have the passwords to put the website online (it's a university website, I've just taken over)) but here is an entire page of the site together with the full CSS code.

Hopefully this will help!

I was wondering if the issue might be to do with the Javascript that shows which tab is highlighted for each page (which in retrospect, I should have included when I posted the code last time)?

Cheers for your help!!

E

------------------------------

<title>Bristol RAG</title>


<link rel="stylesheet" type="text/css" href="halfmoontabs.css" />

<script type="text/javascript" src="dropdowntabs.js">
</script>

<body>

<table id="maintable">
<tbody>

<tr>

<td id="header" colspan="4">
<a href="home.htm"><img src="a_data/colour ed.jpg" alt="Bristol RAG" align="left" border="0" height="86" width="178"></a>
 
UNIVERSITY OF BRISTOL RAG
RAISE AND GIVE </td>
</tr>

<tr height="260px">
<td id="splitcols" bgcolor="#cd1048" width="30px"></td>

<td bgcolor="#5782e0" width="280px"><a href="involved.htm"><img src="getinvolved2.jpg" valign="bottom" width="280px" height="264px"></a></td>

<td style="padding: 10px;" height="auto" valign="bottom" width="200px" bgcolor="#7cac00">
<div id="moonmenu" class="halfmoon">
<ul>
<li><a href="home.htm">Home</a></li> 
<li><a href="events.htm">Events</a></li> 
<li><a href="raids.htm">Raids</a></li> 
<li><a href="casino.htm">Casino</a></li> 
<li><a href="totals.htm">Money Raised</a></li> 
<li><a href="charities.htm">Charities</a></li> 
<li><a href="links.htm">Links</a></li> 
</ul>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("moonmenu", 3)
</script>
</td>

<td bgcolor="#ecb301" width="300px"><a href="http://www.justgiving.com/bristolrag"><img src="donatenow.jpg" valign="top" align="right"></a></td>

</tr>

<tr>
<td id="mainbody" colspan="3">
Rogues Gallery: Past RAG Chairs
2007/08 - Mark Critchard
2006/07 - Jon Medcraft
2005/06 - Huda Gamil
2004/05 - Zoe Thomas
2003/04 - Cat Dix
2002/03 - Alex Durbridge
2001/02 - Alex Durbridge
2000/01 - Jon Reay
1999/00 - Caroline Annfield


</td>

<td id="mainbody" colspan="1">
RAG Exec 07-08
RAG Chair - Mark Critchard
Vice Chair - Amie Tsang, Richard Bradshaw
Treasurer - Phil Marke
Events Coordinator - Dave Mansell
Raids Coordinator - Adam Lewis
Casino Manager - Sarah Garlick
RAG Week Coordinator - Michelle Tackie
RAG Procession Coordinator - George Cave
RAG Ball Coordinator - Janina Drozd, Laura Cooper
Kili Climb Coordinator - Laura Tomlinson
Publicity Officer - Adam Nunns
Social Secretary - Kerry Kerruish
Webmaster - Matina Mitchell
 
RAG Exec 06-07
RAG Chair - Jon Medcraft
Vice Chair - 
Treasurer - 
Events Coordinator - 
Raids Coordinator - 
Casino Manager - 
RAG Week Coordinator - 
RAG Procession Coordinator - 
RAG Ball Coordinator - 
Kili Climb Coordinator - 
Publicity Officer - 
Social Secretary - 
Webmaster - 
 
</td>
</tr>

<tr>
<td id="mainbody" colspan="4">
this website and its content is copyright to © bristol rag 2008 - <a href="map.htm">site map</a> - <a href="mailto:rag-webmaster@bristol.ac.uk">contact webmaster</a>
</td>
</tr>

</tbody>
</table>


</body>
</html>

/* Contents:

SEC1 - Main Table Styles
SEC2 - Tab Styles
SEC3 - Image Styles
SEC4 - Font Styles

*/

/* --------------------- SEC1 - Main Table Styles --------------------- */

body {
background: #272727;
background-position: top;
background-repeat: no-repeat;
margin-left: 0;
margin-top: 0;
font-family: Verdana,sans-serif;
}

a:link{
color: #ffffff;
}

a:visited{
color: #7cac00;
}

a:active, a:hover{
color: #ecb301;
}

body {
text-align: center;
}

#maintable {
margin: 0 auto 0 auto;
background: #272727;
width: 56%;
border-collapse: collapse;
border: none;
border-spacing: none;
text-align: left;
}

#header {
padding: 10px;
height: 100;
vertical-align: top;
background: #272727;
color: #FFFFFF;
}

#mainbody {
padding: 10px;
height: auto;
width: 100%;
vertical-align: top;
}

#splitcols {
padding: 10px;
height: auto;
vertical-align: top;
}

#footer {
padding: 5px;
height: auto;
vertical-align: center;
background: #770024;
text-align: center;
}

/* --------------------- SEC2 - Tab Styles ----------------------- */

.halfmoon{ margin-bottom: 1em; }

.halfmoon ul{
padding: 5px 8px 5px 8px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.halfmoon li{ display: inline; margin: 0; }

.halfmoon li a{
text-decoration: none;
padding: 5px 8px 5px 8px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
color: #FFFFFF;
font-size: 13px;
background: #7cac00;
}

.halfmoon li a:visited{
color: #FFFFFF;
}

.halfmoon li a:hover, .halfmoon li.selected a{
background-color: #FFFFFF;
color: #7cac00;
}

/* -------------------- SEC3 Image Styles -------------------- */

.somediv{
width: auto;
clear: left;
border: 0px solid gray;
}

.somediv .adam{ float: left; width: 190px; } /*Specialised for Adam */

* html .somediv p{ /* IE 3px jog hack*/ height: 1%; }

.somediv p{ margin-top: 0; margin-left: 190px; }
.subhead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
.mainhead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

/* ---------------------- SEC4 Font Styles ------------------------ */
.title{
font-size: 14px;
font-weight: normal;
color: #e2a500;
}
.subtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

p {
font-size: 11px;
color: #979797;
}

rangana

06-27-2008, 01:58 AM

Looks identical to me on IE7, Opera, FF and Safari except for the Money Raised text which is wrapped on FF.

Can't see what the problem you're describing.

josephhamilton1

06-27-2008, 02:58 AM

I would have to assume that you are testing using IE6, you can know this clicking Help->About Internet Explorer. I got the same results as these other guys, the colors work fine. Of course I am running IE7 also.

The easy answer is to not worry about and provide a link to upgrade to IE7 (this should have happened via Automatic Updates in Windows) but if the user doesn't have IE7 then he/she can download it and install it.

You should download and install Firebug if you think it's a JS error, to be able to track the JS as it executes. I would be happy to explain how to use Firebug if you are interested.

BTW, you don't have to put all those tags to make the LI vertical, just remove the
.halfmoon li { display:inline } part in the css. This is what is making the li horizontal, they are vertical by default.

Sorry to not be able to fix your problem.

jscheuer1

06-27-2008, 03:05 AM

Put up a demo of the problem live on the web. It doesn't have to link to anything. We just need to see what you are talking about. However, my best guess is that there are other styles on and/or linked to the actual page that are causing the trouble you are seeing.

More styles cascade in IE (particularly where links are involved) than in other browsers. Like if you have styles defined for links in general, and also have a class of links. Any and all styles defined for links in general will cascade in IE, including pseudo classes. However, most browsers will not cascade a pseudo class if it isn't mentioned at all for a given class.

The solution is to specifically spell out the pseudo classes wherever they may be causing a problem.

Try clearing your history in IE, if it is the visited pseudo class causing the problem, this will at least fix it temporarily.

And, when listing pseudo classes, always go in order:

:link
:visited
:hover
:active

frustrated_webmaster

06-27-2008, 06:57 AM

Thanks guys!!

I've been using the new IE8 (was using IE7 but wondered if that was the problem, hence upgraded) so it's not a version problem.

I've been using Firebug but since the problem doesn't appear in Firefox I haven't been able to have much success working out what it might be.

How do I put a demo of the problem on the web? (sorry...)

I have the link style generally defined, but the colour for both active and visited links should both be non-white, so surely the link should still appear once it's been clicked on? Or have I got the wrong end of the stick?

And, thanks for the tip on making the LI vertical!

E.

jscheuer1

06-27-2008, 12:57 PM

IE 8 is, or will be, at least according to MS and many observers, one of the most standards compliant browsers. So, I'd try validating your page to HTML 4.01 strict. And you might as well try other DOCTYPEs and no DOCTYPE to see if that might help. However, IE 8 is still in Beta, so it may have a few kinks yet to be worked out.

Validation Services -

For HTML:

http://validator.w3.org/

For css:

http://jigsaw.w3.org/css-validator/

Now, to put up a demo of the problem, all you need is a host and a copy of your page, enough of it at least to show the rendering issue you are having. Then upload it to the host and give us the URL.

Also, IE 6 and 7 have developer extensions available (as add ons) that can help you find out what problems might be in those browsers, perhaps IE 8 does too (I'm sure it will eventually, if it doesn't already), you might want to look into that.

frustrated_webmaster

06-27-2008, 11:53 PM

Eek, sorry, bit of a novice at all this (first ever website) but I tried to validate the page and it returned about 50+ errors. How do I know what kind of doctype to validate it?! In fact, what is a doctype?!

I don't have a host so I can't put it online but hopefully there's some way of figuring out how to put it online via the university. I'm trying to sort it out but I don't know that I can over the weekend.

Will investigate developer extensions!

Sorry to be such a novice...

jscheuer1

06-28-2008, 05:44 AM

DOCTYPE's simply tell the browser which set of rules to use.

Let's see. Trying not to seem overbearing (perhaps unavoidable here), I would say that if you are serious about using DHTML that you add to your pages yourself and about wanting to code for IE 8 and/or the web in general, you will need to familiarize yourself with working with the validator (that or be very lucky ;)). I can help if you have specific questions about specific errors. The information given often seems a bit cryptic until you get used to it.

Validation is no panacea though, it simply gets your code into line with the standards, so that errors/problems may be dealt with on that basis, rather than on a sort of hit or miss one.

As to DOCTYPE, if you are just getting on board with validation, might as well go with the current 'gold standard', which is HTML 4.01 strict in which your page's source begins like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

At the same time, still trying not to be overbearing, I wouldn't worry about IE 8 for now. Wait until it is distributed as part of MS's automatic update. Until MS releases it that way, IE 8 will just be a beta, and anyone using it should know, and most will, that they have no right expecting sites to render properly in it.

frustrated_webmaster

06-28-2008, 11:26 AM

Thanks John! Trying to go through the validation errors at the moment so hopefully I can iron out some of them ...

That said though, I've had the following errors in this line of code:
<link rel="stylesheet" type="text/css" href="halfmoontabs.css" />

"NET-enabling start-tag requires SHORTTAG YES."
"document type does not allow element "LINK" here."

How do I fix them?

Also, where should the tag <BODY> go? I put it both before my CSS declaration (and JS link) and after it and the validator didn't like it either way :/

PS. In adding the doctype, seemingly the tab issue has been fixed ... thanks for the help with that!!

jscheuer1

06-28-2008, 01:34 PM

If you are using HTML 4.01 strict, this is what a blank page would look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>

</body>
</html>

<link rel="stylesheet" type="text/css" href="halfmoontabs.css" />

"NET-enabling start-tag requires SHORTTAG YES."
"document type does not allow element "LINK" here."

That is one of the 'cryptic' sort of errors I mentioned. I've highlighted the problem. Things like:

<link rel="stylesheet" type="text/css" href="halfmoontabs.css" />

 

<img src="some.jpg" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

are for XHTML only. If you use them in HTML, they will cause validation errors and sometimes perhaps even errors in browsers. All of those tags can be made valid by changing the /> to >.

What makes it even more confusing is that, until you fix them, other tags after them in the head or body (wherever the tags are) may also be seen as invalid, when their only fault lies in following or being near one of these invalid tags, and the main page element that they are in (head or body, generally) may also be reported as having problems.

As for the order of, placement of, and arrangement of tags go, though there is some flexibility, this is the generally approved order and arrangement:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="some.css" type="text/css">
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div>
 
<img src="some.jpg" alt="">
</div>
<form action="">
<div>
<input type="text" name="name"> 
<input type="submit" value="Go">
</div>
</form>
</body>
</html>

If you have other meta tags (besides the Content-Type declaration, which should go where I've placed it), they should go before the <title></title> tag. Scripts may also appear in the body section, style belongs in the head.

frustrated_webmaster

06-29-2008, 05:00 PM

Thank you so much for your help so far!

Where it says "There is no attribute 'align' " or "There is no attribute 'width' ", what should I write instead of 'align' and 'width'?

jscheuer1

06-29-2008, 06:44 PM

For the purposes of this response, I will assume that you know the basics of using css style inline, and in both on page and external stylesheets. If not, just let me know.

OK, now obviously it's just not true that there is no attribute, you put it there. However, as I'm sure you've guessed, that particular attribute for that particular tag is no longer a part of the particular HTML (I am still assuming that you are using 4.01 strict) standard that your DOCTYPE invokes.

In like 99.99% of cases you can substitute css style.

For example, if the attribute is:

align="center"

(which was deprecated because it is a bit ambiguous), You can use style:

text-align:center;

for the effect of centering contained text. Or:

margin:0 auto;

for centering the element itself. The text-align property may also have values of left or right. If you are dealing with left or right alignment of the element itself, you may want to float it (my favorite), but creative use of margins and/or absolute and/or relative positioning can also be useful. It really depends upon the exact effect you are after. The complications involved are made up for (usually) by the precision across browsers that the new methods achieve, and by (the potential at least) of using an external stylesheet for all of your pages, which will allow you to change the global style of a site by editing only one file.

Width is easier because we all know what that is supposed to mean. The style width may be used in its place, ex:

width:250px;