Forum Moderators: not2easy
Looking for a little help with the following code:
My doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
My CSS:
.navitem {
text-align: center;
font: normal 12px Arial, Helvetica, sans-serif;
}
.navitem a {
width: 105px;
height: 22px;
color: #000000;
background-color: #FFFFFF;
border-right: 1px solid #CCCCCC;
text-decoration: none;
padding-top: 3px;
padding-bottom: 2px
}
.navitem a:link { color: #000000; }
.navitem a:visited { color: #000000; }
.navitem a:hover {
background-color: #F5F5F5;
text-decoration: none;
}
#current {
background-color: #e5e5e5;
border-right: 1px solid #CCCCCC;
width: 105px;
height: 22px;
}
My HTML document:
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<%if(pageHead.equals("home")){%><td class="navItem" id="current">Home</td><%}else{%>
<td class="navItem"><a href="/">Home</a></td>
<%}if(pageHead.equals("corporate")){%><td class="navItem" id="current">Corporate</td><%}else{%>
<td class="navItem"><a href="/corporate.html">Corporate</a></td>
<%}%>
</tr>
</table>
As you can see from my HTML code I am using inline scriptlet (JSP) to determine which page is currently shown. You can easily remove this to replicate what I am trying to get to happen by placing the relevant code into another html document i.e. home and corporate. The code works in IE (no surprise there), but in FF and others it is all messed up. I was wondering if someone might be kind enough to point out where I am going wrong and also point out the mistakes in my code...
With thanks and kindest regards,
-Gs
[edited by: Alternative_Future at 1:49 pm (utc) on Oct. 2, 2006]
As to the doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">This is the full doctype you require.
To put IE in standards-compliance mode, you also have to have this doctype as the very first character in your document - no whitespace, no
<?xmlChances are, you're developing for IE, getting it to work in IE's quirks mode, and wondering why it doesn't work in Firefox. Simply put, in general, Firefox is displaying how the code you've written is meant to display - and IE is not. There are exceptions to this rule, but they are very few and very far in between.
If you can give us a better idea as to how it is messed up, that would help.
Thanks so much for the reply. Here are the answers to your questions:
>>Your doctype is incomplete
Yes I know, I inherited the site from the previous web developer and I have tried coming out of quirks mode which in turn messes up the site in FF in greater detail. I know I should just bring the thing in and redo it, but time is of the essence at the moment :(
>>How exactly do you mean "all messed up"?
The class selector navitem and anchor selector with the pseudo-classes style rules - mainly width and height are not working in FF this in turn screws the view up. Something tells me that the height and width should not work for these selectors and that FF is correct not to render them and IE is at fault. But is there a hack I can use in the short term to get the thing rendering the same as IE?
>>Your navigation could probably be better produced in a list than a table - is there a particular reason you've done it this way?
I think answer one covered this - I am tempted to go ahead and do this but just thought if there was a quick and perhaps dirty fix it would have been fine in the short term.
TIA,
-Gs
[edited by: Alternative_Future at 7:30 am (utc) on Oct. 3, 2006]
The class selector navitem and anchor selector with the pseudo-classes style rules - mainly width and height are not working in FF this in turn screws the view up.
This is because anchors are inline elements by default - you won't be able to set a width nor height to them, that's not possible in the realm of inline elements.
Set them to display as block and the width and height will render properly. Float them accordingly to make it look like an inline element again :)
Now we are talking :) do you have an example of using the display:block and float CSS is not my main area of expertise as you may have guessed :)
Again thanks for taking the time out to help here
-Gs
Thanks so much you have saved me a great deal of time :)
-Gs
