Damn IE....

Sherbs · 3 Apr 2006 at 11:35

Mr_L · 3 Apr 2006 at 11:48

For the gap on the right hand side my guess would be that the padding or margin is causing the problem. You could try setting the default margins in the CSS with the following code; -

Code:

*,html,body{margin:0;padding:0;}

You'd then have to set all the padding and margin attributes yourself. It usually gives you better control of the style because you are making the decisions.

As for the <hr /> tag, IE just doesn't like it to be styled. Try applying a border-bottom to the p class="news" and the span class="date" selectors.

Sherbs · 3 Apr 2006 at 13:04

Tried all of that, and fiddled. Still no luck.

I am proper stumped on this one.

xiphrex · 3 Apr 2006 at 14:46

Can I ask what the problem is? I visited the site with IE and firefox and I cant see a problem (except the menu, the rollover has extra padding or margin so it moves the text out of position).

Sherbs · 3 Apr 2006 at 14:56

Thats what the problem is.

Amleto · 6 Apr 2006 at 03:54

this works a little better:

h1 a:hover
{
background-color: black;
color: white;
border: 5px solid Black;
text-decoration: none;
}

a {
color: black;
border: 5px solid #acacac;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

It will still look dodgy with that gradient background strip which I haven't used, and it messes up your links further down, but you can solve that.

Sherbs · 6 Apr 2006 at 12:27

Erm, it looks the same but with buggered up links.

Amleto · 6 Apr 2006 at 17:23

SherberT* said:
Erm, it looks the same but with buggered up links.

it stops the text shifting about when you hover. Just make new 'a' stuff for the links without the border.

xiphrex · 6 Apr 2006 at 23:24

Hmm try this (changes are bold):

h1 a{
color: Black;
font: Trebuchet MS, sans-serif;
padding:0 5px;
}

h1 a:visited
{
color: Black;
font: Trebuchet MS, sans-serif;
}

h1 a:hover
{
background-color: black;
color: white;
text-decoration: none;
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
}

a {
color: black;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

(I removed the 5pixel border that appears when you rollover the menu)

EDIT: ah I see why you used a border, altered above accordingly. Also change the h1 style to this:

h1 {
font-size: 11px;
text-align: center;
color: #564b47;
background-image: url(menbg.jpg);
border-top: 1px solid black;
border-bottom: 1px solid black;
padding:4px 0 5px;
}

That should fix it in IE and firefox.