asked on

Why do my buttons look different in ie and firefox

I have created a tabbed menu using css. When I look at the menu in Firefox it looks okay. But when I look at it in IE, the top of the buttons are cut off. The button style sheet is in menu.css and the rest of the site is in style_2.css.

The page can be viewed at this address:

http://www.test-zone.org.uk/

Michael_MCDST

Wow, that is weird, no real explaination for it other than IE is not providing anough "room" to view the buttons correctly. Try to make the button area bigger and test.

LZ1

The reason it's not showing correctly in IE is because the #tabs are relative to the #textcolumn and it ends up overflowing into the header. What you need to do (as I've done here) is move the #textcolumn down a bit in order to alleviate the overlap.
Let us know if this works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 
 
<head>
 
<title>Sandy Crole, landscape artist</title>
<meta name="description" content="" />
 
<meta name="keywords" content=""/>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="includes/menu_4.js"></script>
<style> 
#tabs ul {
	list-style: none;
	display: inline;
	margin-top: 8;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 8;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
#tabs ul li {
	margin: 0;
	padding: 0;
	display: inline;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
#tabs li a {
	color: #000 ;
	background-color: #c0c0c0 ;
	border: 1px outset #000 ;
	padding: 8px ;
	text-decoration: none ;
	display: inline ;
}
#tabs li a:hover {
	color: #fff ;
	background-color: #000 ;
}
 
A:link {color: #666; font-weight:bold; text-decoration:none;}
A:active {color: #666; font-weight:bold; text-decoration:none;}
A:visited {color: #666; font-weight:bold; text-decoration:none;}
A:hover {color: #333; font-weight:bold; text-decoration:none;}
 
body{background-color:#EFEAEA;
	vertical-align:middle;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;}
	
h1{	font-size:14px;
	margin: -4px 0 -6px 0;
	font-family:century gothic, Arial, Helvetica, sans-serif;
	color:#999;}
 
h2{	font-size:10px;
	margin: 8px 0 -8px 0;
	color:#999;}
	
html>/**/body h2{ font-size:10px;
	margin: 8px 0 0 0;
	color:#999;}
	
#content {
	background-color:#FFF;
	height:590px;
	width:940px;
	vertical-align:middle;
	position:relative;
	text-align:middle;
	margin:auto;
	}
#pageWrapper{
	width:100%;
	height:100%;
	vertical-align:middle;
	color:#999;
	}
#overflowScroll {
    overflow:auto;
    padding: 5px;
    margin-width: 10px;
    width: 340px;
    height: 360px;
    scrollbar-face-color: #fff;
    scrollbar-shadow-color: #EFEAEA;
    scrollbar-highlight-color: #EFEAEA;
    scrollbar-3dlight-color: #fff;
    scrollbar-darkshadow-color: #fff;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: #999;}
 
.header {
	height:70px;
	width:868px;
	text-align:right;
	margin:12px;
	vertical-align:text-bottom;}
	
.highlight1 {
	font:"Times New Roman", Times, serif;
	font-size:14px;}
 
.index{
	margin: 0 12px 12px 12px;}
	
 
		
.textcolumn{
	float:left;
	width:340px;
	text-align:left;
	position: relative;
	margin-top: -40px;
	margin-right: 12px;
	margin-bottom: 12px;
	margin-left: 48px;
	padding-top: 40px;
}
	
 
	
.photocolumn{
	float:right;	
	width:460px;
	padding:0 48px 12px 12px;}
	
	
 
</style>
</head>
<body>
<center>
<div id="pageWrapper">
<div id="content">
<div class="header"><br>
  <img src="http://www.test-zone.org.uk/images/logo.jpg" alt="Sandy Crole, landscape artist" width="221" height="69" border="0"></div>
  
<div class="photocolumn">    
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src="http://www.test-zone.org.uk/images/image_1.jpg" width="460" height="328" border="0"></p>
</div>
 
<div class="textcolumn">
<div id="tabs">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
  <p>&nbsp;</p>
  <h1>sandy crole   </h1>
  <h2>&nbsp;</h2>
  <p>I  am a landscape artist specializing in old buildings, especially churches. Based  in London, I spent formative years in the shires and in Scotland, and continue  to travel round the British Isles in search of peace and quiet to paint.</p>
  <p>I  graduated in Fine Art from St Martins in 1986 and have been painting landscapes  since I could first say &lsquo;topographical tradition&rsquo;.&nbsp; </p>
  <p>Drawn  from life on full size standard sheets of Saunders Waterford or Arches paper,  and subject to the usual vagaries of the British climate, I seek to capture  both the scale and the intricacy of these historic and much-loved buildings.  Using ink and watercolour, the process aims to maintain the spontaneity and  fluidity of painting in unpredictable circumstances.&nbsp; </p>
  <p>I  also take photographs of these places, often in black and white, but sadly no  longer in Kodak&rsquo;s lamented High Speed Infra Red which captured the spectral  nature of churchyards so well.</p>
  <p>For  commissions, prices, or to go onto the exhibitions mailing list, contact <a href="mailto:sandycrole@googlemail.com">sandycrole@googlemail.com</a> </p>
</div>
</div>
</div>
</center>
</body>
 
 
</html>

Open in new window

v2Media

IE6 & 7 subtracts the padding to the given height/width of the inline element when in quirks mode. In standards mode, padding is added to the height/width. position:relative applied to your #tabs li a styles should help; else give #tags li a {display:block; float:left; height: 26px; line-height:26px;}. You can safely remove display:inline on your a tag styles since <a>'s are inline anyway.

Typically to avoid this problem in IE, you would nest two elements giving the parent the desired padding and the child the desired height/width.

v2Media

Nice catch LZ. I didn't look close enough to see the decapitation.

myderrick

I also tried something...

Add padding-top: 10px (worked for me) to the #textcolumn.

Lets see how it turns out.

MD

SOLUTION

v2Media

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

The .padding-top: XXpx works so long as it's applied to the #textcolumn DIV. This is because the #tabs DIV is placed within the #textcolumn DIV. I had added 40px, simply to over accomodate the menu in this case.

myderrick

LZ1 - Your padding and margin without px eg 8;
#tabs ul {

margin-top: 8;/**without px**/

Will this work?

MD

LZ1

No. You need to specify a unit of measure. In this case, pixels work best I think. :)

Rouchie

The only time you don't need to specify the unit of measure is when the number is 0. Any other number requires the unit of measure!

myderrick

LZ_1's codes he provided did not have any units so i was just wondering.

I guess you have to look at your codes again.

MD

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

myderrick

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mattybrown

ASKER

Thank you for all your advice.

Both LZ1's suggestions for tabs:

http://www.test-zone.org.uk/index1.html

and myderrick's suggestion for textcolumn:

http://www.test-zone.org.uk/index1.html

suggestion worked fine - the buttons are now displayed in IE and Firefox.