Log in

View Full Version : This CSS has got me stumped - help please


gwmbox
02-05-2008, 05:02 AM
OK here is some code I have been working with and for whatever reason I cannot seem to get the same look in IE7 and FF2

The link should have a thin blue border around all of it, it works fine in FF but not IE(7). IE only shows the left and right borders

I have set the Body to have 0 for both margin and padding as I do not want any padding etc around the content, I have also as shown set the height to be 100% and the extra 1 px so the scroll bar is always shown - stops the jumping for pages without and then with scroll bars :)

I cannot work out why the conflict exists - hope you can enlighten me :)

Oh and any suggestions to tidy up or minimise my code here is welcomed :)


<style>

html {
/* this is a hack to force scrollbars on at
all times so that the page does not jump
when going from short to long pages */
height: 100%;
margin-bottom: 1px;
}

body {
margin: 0;
padding: 0;
}

a.pgmenu,
a:link.pgmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: White;
text-decoration: none;
padding: 2px 3px 2px 3px;
border: 1px solid #1E90FF;
background-color: Black;
}

a:visited.pgmenu {
text-decoration: none;
color: White;
}

a:hover.pgmenu,
a:active.pgmenu {
border: 1px solid Green;
background-color: #003500;
color: White;
}

img.pgmenu {
vertical-align: text-bottom;
border: none;
}

</style>

and just for a very basic example


<body bgcolor="#000000">
<a href="http://asite.com/" class="pgmenu">My Test</a>

Cheers for all your help
jscheuer1
02-05-2008, 05:20 AM
You really cannot give any top or bottom padding to an inline element like a span or an anchor. I'm a little surprised that FF lets you do so. There is a not widely supported display style that could work out fairly well here:


a.pgmenu,
a:link.pgmenu {
display:inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: White;
text-decoration: none;
padding: 2px 3px 2px 3px;
border: 1px solid #1E90FF;
background-color: Black;
}

But the real way to deal with something like this is to make it display block or contained within a block level element like a division and explicitly set its width, it could even be floated:


a.pgmenu,
a:link.pgmenu {
display:block;
width:4em;
float:left;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: White;
text-decoration: none;
padding: 2px 3px 2px 3px;
border: 1px solid #1E90FF;
background-color: Black;
}
gwmbox
02-05-2008, 05:34 AM
Excellent - learnt something new which is even better - very much appreciated