Member Avatar for Mike_H

My site looks like I want it to in IE but there are several problems when viewing in FF.

Compare http://www.senatorbarkley.com/bio1.htm between the two browsers.
On right side, the white box "Bookmark This Page" is to the left instead of being centered.
The yellow is not going down below the white box.
How can I fix these?

Then in page http://www.senatorbarkley.com/bio2.htm I add two buttons in the gold area at the top. They display just fine in IE but in FF the text in the main center runs out of the center column. The Search button does not even show up in FF.
Again how can I fix this?

The CSS file can be found at http://www.senatorbarkley.com/css/main1.css .

Thanks.

  • 3 Contributors
  • 3 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for wickedsunny

buddy u shud post the code or tell me is that in div or table. if its in div then u shud use a style. let me give u the code style="margin:0 auto;" this will solve it in all browsers it will remain centered :)

Member Avatar for Mike_H

buddy u shud post the code or tell me is that in div or table. if its in div then u shud use a style. let me give u the code style="margin:0 auto;" this will solve it in all browsers it will remain centered :)

Thanks wickedsunny, using margin:0 auto made the box center in FF.

Now can you (or anyone else) help me with the second problem. I did not upload the CSS or code as both are long. I have cut them both down to the minimum and still show the problem. Here is the CSS:

div {
	text-align:center;
}

#contribute_button {
	text-align:right;
	margin-top: -50px;
	padding-right: 2.5%;
}

div#search_button {
	float: left;
	margin-top: -50px;
	padding-left: 2.5%;	
	z-index: 5;
}

div#page {
	border: none;
	width:100%;
	margin:0 auto;	
	text-align:left;
	background: #393C62;
}

div#header {
	border-top:solid #393C62;
	border-bottom:solid #393C62;  
	width:100%;
	background: #393C62;
    margin:0 auto;	
}

div#leftcontent {
	border:none;
	width:210px;
	float:left; 
    margin:0 auto;	
	background: #F7FF96;
	background-repeat:repeat;
	height:1100px;	
}

div#rightcontent {
	border:none;
    width:210px;
	float:right; 
    margin:0 auto;	
	background: #595d9b;
	background-repeat:repeat;
 	height:1100px;	
}

div#centercontent {
	border:solid white;;
	background: white;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	height: 1045px;	
	overflow:auto;
    margin:0 auto;		
	}

div#testimonial {
	border:none;
	text-align:center;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: .75em;
	color: white;
	padding: 0px 3px 0px 3px; 
    margin:0 auto;		 
}

And the HTML is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>
<link rel="stylesheet" href="css/main1.css" type="text/css" />
</head>

<body>
<div id="page">
<div id="header">
<img border="0" src="home_files/Mast-Head.png" width="740" height="111" alt="mast head" />

<div id="testimonial">
<a target="_blank" href="http://www.universitychronicle.com/home/index.cfm?event=displayArticle&amp;uStory_id=47c6a61e-ebd3-4411-9261-0549a076d70a">
<img border="0" src="home_files/university_chronicle_quote.jpg" width="100%" alt="gold box" /></a>&nbsp;
</div>

<div id="search_button">
<a href="search_site.htm"><img border="0" src="images/buttons/search_button.jpg" width="117" height="29" alt="search button" /></a>
</div><!-- search -->

<div id="contribute_button">
<a href="contribute.htm"><img border="0" src="home_files/contribute%20now%20button.jpg" width="117" height="32" alt="Contribute Button" /></a>
</div><!-- contribute_button -->
</div><!-- header -->
</div>

<div id="leftcontent">
<h4>Left Content Goes Here</h4>
</div><!-- left_content -->

<div id="rightcontent">
<h4><font color="#FFFFFF">Right Content Goes Here</font></h4>
</div><!-- right_content -->

<div id="centercontent">
<p style="text-align: left">The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog.</p>
</div>
</body>
</html>

Thanks in advanced.

Member Avatar for MidiMagic

Using size styles (width, height) and nonzero surround styles (margin, border, padding) in the same tag or stylesheet style guarantees an incompatibility between IE rendering and FF rendering, because IE nests them in the wrong order.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.