I changed my hr width from 100% to 90%. This works fine in IE, as it is centered. However, Firefox left aligns the hr. I threw in "text-align: center" after Firefox left aligned the hr the first time, and it didn't help. How do I code this so that the HR lines up correctly in both IE and Firefox? Thanks.
Here's the CSS...
hr { color: #C0C0C0;
background: #C0C0C0;
border: 0;
height: 2px;
width: 90%;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}Set the left and right margins to "auto" in the CSS. You can save a bit of typing by combining all the margins:
margin: 0 auto;Set the left and right margins to "auto" in the CSS. You can save a bit of typing by combining all the margins:
margin: 0 auto;
Thanks for the tip. Still no luck on getting the hr to center in Firefox. It's still shifted left.Worked for me. Do you have a link so we can see if its another elements fault.Here it is
<html>
<head>
<title>Technology</title>
<style type="text/css">
<!--
body {
background-color: #FAF0E6;
margin: 0 auto;
padding: 0;
color : #000000;
font-size : medium;
}
p {margin-left: 20px;
font-family: georgia;
font-size :small;
}
h1 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
h3 {
text-align: center;
font-family: verdana;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
}
a {text-decoration: none}
a:link {
color: #A0522D;
}
a:visited {
color: #A0522D;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #A0522D;
}
hr { color:#A0522D; background: #A0522D; border: 0; Height: 2px; width: 90%;
margin: 0 auto;}
hr {
margin: 0px 10px;
}
hr.some {
margin-top: 0px;
}
hr#one {
margin-top: 10px;
}
-->
</STYLE>
</head>
<body>
<h1> Technology</h1>
<hr class="some">
<p>Example.</p>
<h3> Computer Build at Various Stages</h3>
<table border="1" cellpadding="0" cellspacing="5" bgcolor="FFDEAD" align="center">
<tr>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"emptycase.jpg"><img border="0" img src="emptycase_thmb.jpg"></a></td>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"motherboard.jpg"><img border="0" img src="motherboard_thmb.jpg"></a></td>
</tr>
<tr>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"frontdooropen.jpg"><img border="0" img src="frontdooropen_thmb.jpg"></a></td>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"frontdoorclosed.jpg"><img border="0" img src="frontdoorclosed_thmb.jpg"></a></td>
</tr>
</table>
<hr id="one">
<h2><b><font face="Script MT Bold"><font size="+2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"webpage_home.html"onMouseOver="window.status='Click here to go to Adirondack Cyberscapes Home Page'; return true"onMouseOut="window.status=' '; return true">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Landscapes.html"onMouseOver="window.status='Click here to go to Landscapes'; return true"onMouseOut="window.status=' '; return true">Landscapes</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Music.html"onMouseOver="window.status='Click here to go to Music'; return true"onMouseOut="window.status=' '; return true">Music</a>
</body>
</html>The auto left and right margins are being set to 10px by the second rule.
hr { color:#A0522D; background: #A0522D; border: 0; Height: 2px; width: 90%;
margin: 0 auto;}
hr {
margin: 0px 10px;
}The auto left and right margins are being set to 10px by the second rule.
hr { color:#A0522D; background: #A0522D; border: 0; Height: 2px; width: 90%;
margin: 0 auto;}
hr {
margin: 0px 10px;
}
Bingo! Thanks.
Here's the CSS...
hr { color: #C0C0C0;
background: #C0C0C0;
border: 0;
height: 2px;
width: 90%;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}Set the left and right margins to "auto" in the CSS. You can save a bit of typing by combining all the margins:
margin: 0 auto;Set the left and right margins to "auto" in the CSS. You can save a bit of typing by combining all the margins:
margin: 0 auto;
Thanks for the tip. Still no luck on getting the hr to center in Firefox. It's still shifted left.Worked for me. Do you have a link so we can see if its another elements fault.Here it is
<html>
<head>
<title>Technology</title>
<style type="text/css">
<!--
body {
background-color: #FAF0E6;
margin: 0 auto;
padding: 0;
color : #000000;
font-size : medium;
}
p {margin-left: 20px;
font-family: georgia;
font-size :small;
}
h1 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
h3 {
text-align: center;
font-family: verdana;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
}
a {text-decoration: none}
a:link {
color: #A0522D;
}
a:visited {
color: #A0522D;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #A0522D;
}
hr { color:#A0522D; background: #A0522D; border: 0; Height: 2px; width: 90%;
margin: 0 auto;}
hr {
margin: 0px 10px;
}
hr.some {
margin-top: 0px;
}
hr#one {
margin-top: 10px;
}
-->
</STYLE>
</head>
<body>
<h1> Technology</h1>
<hr class="some">
<p>Example.</p>
<h3> Computer Build at Various Stages</h3>
<table border="1" cellpadding="0" cellspacing="5" bgcolor="FFDEAD" align="center">
<tr>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"emptycase.jpg"><img border="0" img src="emptycase_thmb.jpg"></a></td>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"motherboard.jpg"><img border="0" img src="motherboard_thmb.jpg"></a></td>
</tr>
<tr>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"frontdooropen.jpg"><img border="0" img src="frontdooropen_thmb.jpg"></a></td>
<TD align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"frontdoorclosed.jpg"><img border="0" img src="frontdoorclosed_thmb.jpg"></a></td>
</tr>
</table>
<hr id="one">
<h2><b><font face="Script MT Bold"><font size="+2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"webpage_home.html"onMouseOver="window.status='Click here to go to Adirondack Cyberscapes Home Page'; return true"onMouseOut="window.status=' '; return true">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Landscapes.html"onMouseOver="window.status='Click here to go to Landscapes'; return true"onMouseOut="window.status=' '; return true">Landscapes</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Music.html"onMouseOver="window.status='Click here to go to Music'; return true"onMouseOut="window.status=' '; return true">Music</a>
</body>
</html>The auto left and right margins are being set to 10px by the second rule.
hr { color:#A0522D; background: #A0522D; border: 0; Height: 2px; width: 90%;
margin: 0 auto;}
hr {
margin: 0px 10px;
}The auto left and right margins are being set to 10px by the second rule.
hr { color:#A0522D; background: #A0522D; border: 0; Height: 2px; width: 90%;
margin: 0 auto;}
hr {
margin: 0px 10px;
}
Bingo! Thanks.