Neverside

Site not rendering properly.. (except in firefox)

Ok I'm working on a website, mostly just as html/css practise. But for some reason it's not rendering right. It seems to work fine in firefox, for me that is, but in IE and Opera it's not.

In IE some of the tables seem to be too high/wide and it messes it up, and it doesnt apply the css style to one of the links. And with opera it's only the link problem.

I can't seem to figure out why. Especially the links on the menu, since I use nearly identical code (except for color) on all three of them, but only the first one messes up. And really don't get what's up with the tables.

The HTML validates and so does the CSS except for a few issues of not setting a background color, apparently the validator doesnt think trasparent is acceptable.

I was hoping maybe someone could look at it and maybe give me an idea of what's wrong with it? Thanks

I included a zip file with the site as an attachment.

Hey just some heads up sal, you'll likely get more responses in the future if you post a link to your problem online rather than the download/unzip thing. Yeah it's really not that much work but we Neversidians are a lazy crew

I haven't spent that much time looking at it but I would imagine somewhere you've got a padding or margin set (or maybe it's a Box Model thing). I took a screeny of your layout and found the size difference to be a peculiar 9px, 4 on the left and 5 on the right. Odd.

I'll look at it more soon.

___________________

Jon Culver Chia Pets

I know online would have been better, but I don't have a website at the moment so I have no place to upload it. I would've if I could have. For the time being I'm just practising stuff offline until I make something I really wanna share with the world.

I'll look at it myself some more too but I really can't seem to find why... it's annoying lol.

Especially the thing where the one menu link doesn't work properly and the other two work.

This is the html for the three buttons;

Quote:

<div id="button1"><a class="menufix1" href="index.htm" name="link to home">Latest News</a></div>
<div id="button2"><a class="menufix2" href="archive.htm" name="link to archive">Archive</a></div>
<div id="button3"><a class="menufix3" href="submit.htm" name="link to submit news">Submit News</a></div>

And this is the css for the three buttons;

Quote:

a.menufix1:link {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
position: relative;
left: 13px;
top: 6px;
}

a.menufix1:hover {
border: none;
text-decoration: underline;
}

a.menufix1:visited {
color: #FFFFFF;
background-color: transparent;
}

a.menufix2:link {
color: #000000;
background-color: transparent;
text-decoration: none;
position: relative;
left: 26px;
top: 6px;
}

a.menufix2:hover {
border: none;
text-decoration: underline;
}

a.menufix2:visited {
color: #000000;
background-color: transparent;
}

a.menufix3:link {
color: #000000;
background-color: transparent;
text-decoration: none;
position: relative;
left: 11px;
top: 6px;
}

a.menufix3:hover {
border: none;
text-decoration: underline;
}

a.menufix3:visited {
color: #000000;
background-color: transparent;
}

I mean maybe I'm overlooking something but the first a href is made up in the same way as the second too. And the menufix1 css's are the same as the menufix2 and 3's except for the font color. So why is it working on the second two and not the first? I... don't.. .get it....

Thanks for the suggestions so far, by the way

bahah, you did bring this to light. Pseudo-classes (:link, :visited, etc.) must go in the following order: a:link, a:visited, a:hover, a:active. Just think LoVe/HAte. Rearrange them and that should get the link style working properly.

___________________

Jon Culver Chia Pets

Originally posted by sparky:

bahah, you did bring this to light. Pseudo-classes (:link, :visited, etc.) must go in the following order: a:link, a:visited, a:hover, a:active. Just think LoVe/HAte. Rearrange them and that should get the link style working properly.

I tried it and it didn't make a difference. And the other 2 did work though and they were in the wrong order too so it'd be weird for it to work on two but not the first. Well, it IS weird.

Thanks for the tip though, I'll keep that in mind. But sadly it didn't fix it

Ok it gets weirder. When I change the first link's href to say "a.htm", it DOES work. In IE anyway. But when it's set to index.htm it doesn't. Im so confused

(Sorry for not editing my previous post to include this information btw but I couldn't find the edit button)

how bout this ?

Code:

a.menufix1:link, a.menufix1:visited
{
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
position: relative;
left: 13px;
top: 6px;
}

a.menufix1:hover, a.menufix1:active
{
border: none;
text-decoration: underline;
}

make sure you have no other a, a:link, a:visited, a:active and a:hover rules in the same CSS file as this will ruin all your custom css rules

___________________

digitalDream // complete Webdesign solution //
- - - - - - [ end signature ] - - - - - -