Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can you help me with this CSS layout? 1

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
May 4, 2001
1,284
FR
Hi guys :)

I've made a layout that is perfect (exactly what I want) on Firefox but I've failed to make it work on IE and Opera. Text wraping doesn't work on those.

If someone can be kind enough to lead me to the right direction, here is the code :

Code: 
<html>
<head>

<title></title>

</head>

<style type="text/css">
<!--


/* CSS Document */

body {
margin: 0;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 0.74em;
color: #555555;
background-color: #FFFFFF;
height:100%;
}

#header {
position: relative;
width: 771px;
color: #ffffff;
background: #cc0033;
}

#footer {
position: relative;
width: 771px;
color: #ffffff;
background: #cc0033;
}

#main {
-moz-box-sizing: border-box;
position: relative;
padding:0;
width:771px;

color:#000000;
background:#ffffff;
border:1px solid #333;
}

#nav {
-moz-box-sizing: border-box;
position: relative;
z-index: 5;
float:left; 
clear:left;
width: 140px;
height: 240px;
color:#ffffff;
background:#0066cc;
}

#bloc {
position: relative;
width: 650px;
padding:0;
color:#ffffff;
background:#000000;
}

-->
</style>

<body>

<a name="top" id="top"></a>

<center>

<div id="header">
header
</div>

<div id="main">

    <div id="nav">
    Navigation bar<br>
    - link<br>
    - link<br>
    - link<br>
    - link<br>
    - link<br>
    - link<br>
    </div>

    <div id="bloc">
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text 
    </div>

</div>

<div id="footer">
footer
</div>

<a name="bottom" id="bottom"></a>

</center>

</body>
   
</html>
 
Sort by date Sort by votes
Not really sure what your questions is. IE, of course does not understand the mozilla-only style -moz-box-sizing:.
In addition, you do not have a valid doctype, which puts IE into quirks mode.

If you are expecting IE to move the bloc div beside the nav div, that won't happen as you have declared widths that won't allow that. If you change the width in bloc to
Code: 
#bloc {
position: relative;
width: [COLOR=blue][b]620px[/b][/color];
padding: 0;
color:#ffffff;
background:#000000;
}
that will move the div up.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Hi Greg :)

Well, you would need to look at the layout under Firefox in order to understand what appearance I want to achieve.

I'm not trying to only move "bloc" beside "nav".
On Firefox, you would see that a part of "nav" enters "bloc" and that the text is wraped around it.

Doesn't work on Opera too. Isn't Opera supposed to understand mozilla's -moz-box-sizing?
 
Upvote 0 Downvote
OK, I've found the solution :)

Here it is :

<html>
<head>

<title></title>

</head>

<style type="text/css">
<!--


/* CSS Document */

body {
margin: 0;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 0.74em;
color: #555555;
background-color: #FFFFFF;
height:100%;
}

td {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 0.74em;
}

#header {
position: relative;
width: 771px;
color: #ffffff;
background: #cc0033;
}

#footer {
position: relative;
width: 771px;
color: #ffffff;
background: #cc0033;
}

#main {
position: relative;
padding:0;
width:771px;
color:#000000;
background:#ffffff;
}

#nav {
position: relative;
z-index: 5;
float:left;
width: 140px;
height: 240px;
color:#ffffff;
background:#0066cc;
}

#bloc {
position: relative;

padding: 0px 60px 0px 60px;
color:#ffffff;
background:#000000;
}

-->
</style>

<body>

<a name="top" id="top"></a>

<center>

<table cellspacing="0" cellpadding="0" height="100%">
<tr>
<td valign="top" align="center">

<div id="header">
header
</div>

<div id="main">

<div id="nav">
Navigation bar<br>
- link<br>
- link<br>
- link<br>
- link<br>
- link<br>
- link<br>
</div>

<div id="bloc">
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
</div>

</div>

</td>
</tr>

<tr>
<td valign="bottom" align="center">

<div id="footer">
footer
</div>

</td>
</tr>
</table>

<a name="bottom" id="bottom"></a>

</center>

</body>

</html>
Click to expand...
 
Upvote 0 Downvote
Sleidia said:
Doesn't work on Opera too. Isn't Opera supposed to understand mozilla's -moz-box-sizing?
Click to expand...
Whilst Opera 9 supports the official CSS3 attribute box-sizing, it does not support Mozilla's proprietary -moz- calls. Those only work in Geckos because they are not the fully implemented yet.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
716
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
759
pmonett
pmonett
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
714
3esolar
3
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
606
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top