 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
AssaultM16
Joined: 20 Mar 2008
Posts: 10
|
 Posted: Mon May 12, 2008 6:07 pm Text problem in FF |
 |
|
|
Hello. I am having a problem in FF (thats strange!). The problem is that a div(content) inside a div(page) doesn't float left to another div(navigation) thats inside the same div(page)
Here's an example both in IE and in FF
IE:http://i295.photobucket.com/albums/mm152/AssaultM16/ie.jpg
FF:http://i295.photobucket.com/albums/mm152/AssaultM16/ff.jpg
Heres the HTML
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="descripton" content="hello"/>
<meta name="keywords" content="hello"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="default.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>
<body>
<div class="page">
<div>
<img class="banner" src="banner.jpg" alt="Banner">
</div>
<hr />
<div class="navigation">
hello
</div>
<div class="content">
<p>
Hello this is an example fyygwufyvgreyqgfrgvygeyvg whurwrf7y7r271r212r8124798477nvf dchgytfrtf4764 fvyfsgvyg8q7eg7r7g7ertyv7f7vy fvyqyfv7revge7regv
</p>
<p>
Hello this is a test uggfcrywcgywrgcgcydtcfcwtfcwf qcutufq ctfctwfctqefctfrw dggfywgfyurwgfrgfrgfgr6evt huwhfrwqgfv
</p>
<h4>
This is an example
</h4>
<p>Thank you</p>
</div>
</div>
</body>
</html> |
Heres the CSS for FF:
| Code: |
body { background-color: #333}
div { color: white;}
hr { border: 1px solid white;}
h4 { text-align: center;}
.page {
margin: 0 auto;
border: 2px solid white;
width: 700px;
margin-left: 250px;
}
.banner {
width: 700px;
height: 150px;
}
.navigation {
text-align: center;
border-right: 2px solid white;
border-top: 2px solid white;
padding: 10px 40px 300px 40px;
font-weight: bold;
color: blue;
float: left;
text-decoration: underline;
top: -9px;
}
.content {
margin-left: 5px;
float: left;
} |
Heres the CSS for IE
| Code: |
body { background-color: #333;}
div { color: white;}
hr { border: 1px solid white;}
h4 { text-align: center;}
.page
{
margin-left: 290px;
margin-right: 270px;
border: 2px solid white;
position: absolute;
}
.banner {
width: 700px;
height: 150px;
}
.navigation {
text-align: center;
border-right: 2px solid white;
border-top: 2px solid white;
padding: 10px 40px 300px 40px;
font-weight: bold;
color: blue;
text-decoration: underline;
float: left;
clear: left;
position: relative;
top: -10px;
}
.content {
margin-left: 5px;
float: left;
}
|
Thank You,
AssaultM16 |
|
sticks464
Joined: 31 Dec 2006
Posts: 930
|
| Posted: Mon May 12, 2008 8:20 pm |
|
|
|
Give this a try. It works in IE7 and FF without using any hacks or two stylesheets. I tried to comment the css to help you.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="descripton" content="hello"/>
<meta name="keywords" content="hello"/>
<style type="text/css">
* {
margin:0;
padding:0;
}
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
img {border:none;}/* removes the blue image border in IE */
body {
background-color: #333;
text-align:center; /* needed for IE5/6 to center content */
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
color: white;
}
.page {
margin: 0 auto;
border: 2px solid white;
width: 700px;
height:auto;
text-align:left; /* resets content alignment for modern browsers */
}
#logo {
height:150px; /* 2px replaces hr and border elements */
border-bottom:2px solid #fff;
}
.navigation {
text-align: center;
padding: 10px 0;
font-weight: bold;
color: blue;
float: left;
text-decoration: underline;
width:125px;
height:1%; /* needed for IE 3px box model hack */
}
.content {
float: right;
width:573px;
border-left: 2px solid white; /* longest content div gets the border */
}
h4 {
text-align: center;
color:black;
}
.content p {padding:10px;}
.clearer {clear:both; height:1px; margin-bottom:-1px;} /* helps align left contentborder with bottom border */
</style>
</head>
<body>
<div class="page">
<div id="logo">
<img class="banner" src="banner.jpg" alt="Banner">
</div> <!-- end logo -->
<div class="navigation">
hello
</div> <!-- end navigation -->
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
</p>
<h4>
This is an example
</h4>
<p>Thank you</p>
</div> <!-- end content -->
<div class="clearer"></div>
</div> <!-- end page -->
</body>
</html> |
|
|
AssaultM16
Joined: 20 Mar 2008
Posts: 10
|
| Posted: Wed May 14, 2008 4:50 pm |
|
|
|
Thank you for taking the time to reply me, sticks. But would you mind if you give just the solution because I rather like to make my own code and not to copy it from other.
Thank you again and I hope you understand,
AssaultM16 |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
