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 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:

Code:

.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:

HTML Code:

<div id="moonmenu" class="halfmoon">
            <ul>
                <li><a href="home.htm">Home</a></li><br><br>
                <li><a href="events.htm">Events</a></li><br><br>
                <li><a href="raids.htm">Raids</a></li><br><br>
                <li><a href="casino.htm">Casino</a></li><br><br>
                <li><a href="totals.htm">Money Raised</a></li><br><br>
                <li><a href="charities.htm">Charities</a></li><br><br>
                <li><a href="links.htm">Links</a></li><br><br>
            </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:

HTML Code:

<!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><br><br>
                <li><a href="events.htm">Events</a></li><br><br>
                <li><a href="raids.htm">Raids</a></li><br><br>
                <li><a href="casino.htm">Casino</a></li><br><br>
                <li><a href="totals.htm">Money Raised</a></li><br><br>
                <li><a href="charities.htm">Charities</a></li><br><br>
                <li><a href="links.htm">Links</a></li><br><br>
            </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

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

HTML Code:

<title>Bristol RAG</title>

<!-- CSS for Drop Down Tabs -->
<link rel="stylesheet" type="text/css" href="halfmoontabs.css" />

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

<body>

<table id="maintable">
	<tbody>

    <tr>
	<!-- Header section -->
	    <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>
          <p align="right">&nbsp;</p>
            <p class="mainhead" align="right">UNIVERSITY OF BRISTOL RAG</p>
            <p class="subhead" align="right">RAISE AND GIVE</p>	    </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><br><br>
                <li><a href="events.htm">Events</a></li><br><br>
                <li><a href="raids.htm">Raids</a></li><br><br>
                <li><a href="casino.htm">Casino</a></li><br><br>
                <li><a href="totals.htm">Money Raised</a></li><br><br>
                <li><a href="charities.htm">Charities</a></li><br><br>
                <li><a href="links.htm">Links</a></li><br><br>
            </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">
            <p class="title">Rogues Gallery: Past RAG Chairs</p>
            	<p><font color="#FFFFFF">2007/08</font> - Mark Critchard</p>
                <p><font color="#FFFFFF">2006/07</font> - Jon Medcraft</p>
                <p><font color="#FFFFFF">2005/06</font> - Huda Gamil</p>
                <p><font color="#FFFFFF">2004/05</font> - Zoe Thomas</p>
                <p><font color="#FFFFFF">2003/04</font> - Cat Dix</p>
                <p><font color="#FFFFFF">2002/03</font> - Alex Durbridge</p>
                <p><font color="#FFFFFF">2001/02</font> - Alex Durbridge</p>
                <p><font color="#FFFFFF">2000/01</font> - Jon Reay</p>
                <p><font color="#FFFFFF">1999/00</font> - Caroline Annfield</p>

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


    <tr>
    	<td id="mainbody" colspan="4">
        	<p class="subhead" align="right">this website and its content is copyright to &copy; bristol rag 2008 - <a href="map.htm">site map</a> - <a href="mailto:rag-webmaster@bristol.ac.uk">contact webmaster</a></p>
        </td>
    </tr>    
    
	</tbody>
</table>


</font>
</body>
</html>

Code:

/* 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 <br/> 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:

Code:

<!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.

Thread: Problems with CSS styling of tabs in IE?

Thread Tools

Search Thread

Problems with CSS styling of tabs in IE?

Bookmarks

Bookmarks

Posting Permissions