Forum Moderators: not2easy
<div id="travel"><div id="argentina"><div id="destination-content"><h1>Bla </h1><h2>Text showing ok in IE and FF</h2></div></div><div id="hotels"><div id="hotels-content"><h2>Text showing bad in FF because is not vertical aligned with the other text in H2, it shows at bottom, only in FF <br> This text does same bad effect as the other</h2></div></div></div>CSS code:
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #339933;
line-height: normal;
margin-bottom: 15px;
}#travel {
width: 100%;
text-align:left;
border: 1px #000000;
background-image: url(fotos/bg.jpg);
background-repeat: repeat;
}
#destination, #argentina
{
float: left;
width: 300px;
margin:0; padding:0;
}
#destination-content {
margin:0; padding: 0.1em 1em;
font-size: 70%;
}
#hotels {
margin:0 0 0 200px; padding:0;
}
#hotels-content {
margin:0; padding: 0.75em 1em;
font-size: 100%;
vertical-align:text-bottom;
}
Can you help me to make that code work in Firefox correctly? I just want Text showing bad in FF to be left aligned but not causing unnecessary space in vertical (to emulate a 2 columns layout where that text would be in the second column, the one on right)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #339933;
line-height: normal;
margin-bottom: 15px;
}
#travel {
width: 100%;
text-align:left;
border: 1px #000000;
background-image: url(fotos/bg.jpg);
background-repeat: repeat;
}
#destination, #argentina{
float: left;
width: 300px;
margin:0; padding:0;
}
#destination-content {
margin:0; padding:0.75em 1em;
font-size: 100%;
}
#hotels {
margin:0 0 0 300px; padding:0;
}
#hotels-content {
margin:0;
padding: 0.75em 1em;
font-size: 100%;
} </style>
</head>
<body>
<div id="travel">
<h1>Bla </h1>
<div id="argentina">
<div id="destination-content">
<h2>Text showing ok in IE and FF</h2>
</div>
</div>
<div id="hotels">
<div id="hotels-content">
<h2>Text showing bad in FF because is not vertical aligned with the other text in H2, it shows at bottom, only in FF</h2> <h2>This text does same bad effect as the other</h2>
</div>
</div>
</div>
</body>
</html>
the problem is that I was not sure that it's what OP wanted
