I have this simple page and I'd like to make look the same in FF.
The problem I have now that the whole block is center in IE but in FF it's align to the left. How can I fix it?
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body {background-color: #ff00e3; margin: 0; text-align: center; font: 14px Arial, Verdana, Helvetica, sans-serif;}
.infoHolder {padding: 20px 0px 20px 0px; height: 180px; width: 600px; text-align: left; margin: 0px 0px 14px 0px; background-color: #6e1213;}
p {padding: 0px 20px 0px 20px; text-align: justify; color: #fff;}
</style>
</head>
<body>
<div class="infoHolder">
<p>
Maecenas nibh augue, gravida sit amet, cursus sed, luctus eget, odio.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed malesuada faucibus nibh. Ut congue nunc in velit.
Maecenas ligula odio, semper vel, cursus sed, vehicula id, nunc. Proin eget elit. Etiam vel arcu ac dui vestibulum porta.
</p>
</div>
</body>
</html>Change to "margin: 0px auto 14px auto;" in your .infoHolder.It's working, Thanks but is there any way I can define it once in the CSS page so it'll work for all the different sections I have in the page.
I have another small question:
If I'm putting double text inside the paragraph so FF will keep the "infoHolder" the same size I defined while IE will stratch it down. How can I fix it for FF?
Thanks!Originally posted by weee
It's working, Thanks but is there any way I can define it once in the CSS page so it'll work for all the different sections I have in the page.
If you have a number of sections that should have the same style then you should define a class and apply it to all of them, rather than defining each with its own id.
Originally posted by weee I have another small question:
If I'm putting double text inside the paragraph so FF will keep the "infoHolder" the same size I defined while IE will stratch it down. How can I fix it for FF?
Thanks!
In FF (and standards) there is an attribute called min-height which does what you want. IE treats height like min-height and does not recognise min-height.
The solution is a bit of hack to create an IE only rule. There are a few ways to do that, but one is
#infoHolder {
min-height: 200px;
}
* html #infoHolder {
height: 200px;
}
This takes advantage of another bug in IE, which is not ideal, but it works for now and if MS ever fix the IE CSS implementation you would hope they fix both problems at once so it would behave like FF and still work
Also know that IE5-Mac supports the height property correctly, but doesn't support the min-height or min-width properties. So if you don't mind alienating IE5-Mac users (all three of them) then go ahead and use DaiWelsh's fix above.Originally posted by toicontien
Also know that IE5-Mac supports the height property correctly, but doesn't support the min-height or min-width properties. So if you don't mind alienating IE5-Mac users (all three of them) then go ahead and use DaiWelsh's fix above.
Yes, quite correct, thank you for the reminder, if you want to cater for them, use another hack to hide the height from IE5/Mac specifically
#infoHolder {
min-height: 200px;
}
/* \*/
* html #infoHolder {
height: 200px;
}
/* */
You will come to love and yet hate these hacks as you get more and more into CSS
It's working good but it doesn't work on MAC/IE.
What I also tried was:
height: 180px auto;
And it worked well. Why I can't use the auto?Since "180px auto" is not a valid height, the default height setting was used instead (auto). If the auto height works fine, then don't specify a height.How can I fix it on MAC/IE?You can't without resorting to JavaScript. You best bet is to let the page flow as it wills. What's the point of having a static height for that box?The point is that if there's not too much text I want the box to be in a certain size and there's too much I want it to strtch.
I have another IE vs. FF simple question:
How can I make this HR too look the same in FF? It looks like I want it to look in IE.
hr {
border: dotted;
margin: 10px 0px 10px 20px;
text-align: center;
color: #fff;
width: 202px;
height: 1px;
}
Thanks!Styling the <hr /> element is fairly unpredictable in its support. Instead, apply that border to a normal element. Also try getting rid of any padding that Firefox may put in. When in doubt, play around with the Box Model:
border: 0;
height: 1px;
margin: 0;
padding: 0;
Then start adding those properties until you get the desired effect.Another small questions is:
I have an <H3> & A tage that doesn't look the same.
I have this code:
<h3>Not a member? <a class="join" href=http://www.webdeveloper.com/forum/archive/index.php/"joinNow.htm">Join Now</a></h3>
h3 {
color: #fff;
padding: 20px 0px 0px 20px;
margin: -20px 0px 0px 0px;
}
a.join:link {
text-decoration: underline;
color: #febf1a;
}
a.join:visited {
text-decoration: underline;
color: #febf1a;
}
a.join:hover {
text-decoration: underline;
color: #febf1a;
}
How can I make'em look the same?
Thanks!
The problem I have now that the whole block is center in IE but in FF it's align to the left. How can I fix it?
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body {background-color: #ff00e3; margin: 0; text-align: center; font: 14px Arial, Verdana, Helvetica, sans-serif;}
.infoHolder {padding: 20px 0px 20px 0px; height: 180px; width: 600px; text-align: left; margin: 0px 0px 14px 0px; background-color: #6e1213;}
p {padding: 0px 20px 0px 20px; text-align: justify; color: #fff;}
</style>
</head>
<body>
<div class="infoHolder">
<p>
Maecenas nibh augue, gravida sit amet, cursus sed, luctus eget, odio.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed malesuada faucibus nibh. Ut congue nunc in velit.
Maecenas ligula odio, semper vel, cursus sed, vehicula id, nunc. Proin eget elit. Etiam vel arcu ac dui vestibulum porta.
</p>
</div>
</body>
</html>Change to "margin: 0px auto 14px auto;" in your .infoHolder.It's working, Thanks but is there any way I can define it once in the CSS page so it'll work for all the different sections I have in the page.
I have another small question:
If I'm putting double text inside the paragraph so FF will keep the "infoHolder" the same size I defined while IE will stratch it down. How can I fix it for FF?
Thanks!Originally posted by weee
It's working, Thanks but is there any way I can define it once in the CSS page so it'll work for all the different sections I have in the page.
If you have a number of sections that should have the same style then you should define a class and apply it to all of them, rather than defining each with its own id.
Originally posted by weee I have another small question:
If I'm putting double text inside the paragraph so FF will keep the "infoHolder" the same size I defined while IE will stratch it down. How can I fix it for FF?
Thanks!
In FF (and standards) there is an attribute called min-height which does what you want. IE treats height like min-height and does not recognise min-height.
The solution is a bit of hack to create an IE only rule. There are a few ways to do that, but one is
#infoHolder {
min-height: 200px;
}
* html #infoHolder {
height: 200px;
}
This takes advantage of another bug in IE, which is not ideal, but it works for now and if MS ever fix the IE CSS implementation you would hope they fix both problems at once so it would behave like FF and still work
Also know that IE5-Mac supports the height property correctly, but doesn't support the min-height or min-width properties. So if you don't mind alienating IE5-Mac users (all three of them) then go ahead and use DaiWelsh's fix above.Originally posted by toicontien Also know that IE5-Mac supports the height property correctly, but doesn't support the min-height or min-width properties. So if you don't mind alienating IE5-Mac users (all three of them) then go ahead and use DaiWelsh's fix above.
Yes, quite correct, thank you for the reminder, if you want to cater for them, use another hack to hide the height from IE5/Mac specifically
#infoHolder {
min-height: 200px;
}
/* \*/
* html #infoHolder {
height: 200px;
}
/* */
You will come to love and yet hate these hacks as you get more and more into CSS
It's working good but it doesn't work on MAC/IE.What I also tried was:
height: 180px auto;
And it worked well. Why I can't use the auto?Since "180px auto" is not a valid height, the default height setting was used instead (auto). If the auto height works fine, then don't specify a height.How can I fix it on MAC/IE?You can't without resorting to JavaScript. You best bet is to let the page flow as it wills. What's the point of having a static height for that box?The point is that if there's not too much text I want the box to be in a certain size and there's too much I want it to strtch.
I have another IE vs. FF simple question:
How can I make this HR too look the same in FF? It looks like I want it to look in IE.
hr {
border: dotted;
margin: 10px 0px 10px 20px;
text-align: center;
color: #fff;
width: 202px;
height: 1px;
}
Thanks!Styling the <hr /> element is fairly unpredictable in its support. Instead, apply that border to a normal element. Also try getting rid of any padding that Firefox may put in. When in doubt, play around with the Box Model:
border: 0;
height: 1px;
margin: 0;
padding: 0;
Then start adding those properties until you get the desired effect.Another small questions is:
I have an <H3> & A tage that doesn't look the same.
I have this code:
<h3>Not a member? <a class="join" href=http://www.webdeveloper.com/forum/archive/index.php/"joinNow.htm">Join Now</a></h3>
h3 {
color: #fff;
padding: 20px 0px 0px 20px;
margin: -20px 0px 0px 0px;
}
a.join:link {
text-decoration: underline;
color: #febf1a;
}
a.join:visited {
text-decoration: underline;
color: #febf1a;
}
a.join:hover {
text-decoration: underline;
color: #febf1a;
}
How can I make'em look the same?
Thanks!