Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Why do my buttons look different in ie and firefox

Posted on 2009-02-23
14
Medium Priority
?
470 Views
Last Modified: 2012-05-06
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/
0
Comment
Question by:mattybrown
  • 4
  • 4
  • 3
  • +3
14 Comments
 
LVL 10

Expert Comment

by:Michael_MCDST
ID: 23709930
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.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23711005
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

0
 
LVL 19

Expert Comment

by:v2Media
ID: 23711237
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.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:v2Media
ID: 23711336
Nice catch LZ. I didn't look close enough to see the decapitation.
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23711574
I also tried something...

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

Lets see how it turns out.

MD
0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 100 total points
ID: 23711743
Shifting the entire tab div to header would be a more logical place for the menu and would avoid the problem as well imo. The search engines would find that menu tastier than empty p tags and images too.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23711809
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.
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23712347
LZ1 - Your padding and margin without px eg 8;
#tabs ul {
       
        margin-top: 8;/**without px**/
       

Will this work?

MD
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23712496
No.  You need to specify a unit of measure. In this case, pixels work best I think.  :)
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 23712589
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!
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23712711
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
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 200 total points
ID: 23712739
This was my code, copied from above myderrirck.  The px is in there.
.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;
}

Open in new window

0
 
LVL 13

Assisted Solution

by:myderrick
myderrick earned 200 total points
ID: 23713263
Ok LZ1 I get it. but actually was talking about the tabs:

Never mind. Let us see how it works out.....

MD
#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;
}

Open in new window

0
 

Author Comment

by:mattybrown
ID: 23714450
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question