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

Code:

<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

Code:

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

Code:

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:

Code:

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

Thread: This CSS has got me stumped - help please

Thread Tools

Search Thread

This CSS has got me stumped - help please

Bookmarks

Bookmarks

Posting Permissions