Box model hacks - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Box model hacks

vicksm

3:11 pm on Jun 1, 2005 (gmt 0)

10+ Year Member

I have created a vertically centred page based on Jon Hicks theory. However, I'm really struggling with some of my internal content. The main content section of the page needs to start 264px from the left and needs to overflow ie.
#content{
margin-left:264px;
width: 480px;
height: 199px;
overflow: auto;
}

This looked fine in IE, but Firefox shot the content over to the right, so I fixed it by adding:

* html #content{margin-left:264px;}

and changing #content's margin-left value to 44px instead.

It fixed the problem in Firefox and looked great in IE, but screwed up the layout in Opera. So I tried a 'be nice to opera' hack (bearing in mind that hacking isn't really my thing, I was getting a bit out of my depth at this stage).

Adding the following hack worked for Opera!

html>body #content{
margin-left:264px;
}

But that reduced Firefox and Netscape to shooting the content over to the right again - argh!

If anyone could shed any light on where I may be going wrong, I'd be really grateful.

Many thanks

Vicky

createErrorMsg

4:26 pm on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Are you using a full and valid doctype [w3.org] on your page? With one, IE6 and Opera should be in Standards-mode, which causes them to use the same box model that FF uses all the time. Usually when there is a difference between IE/Opera and FF, it's the result of IE/Opera being in Quirks-mode.

I'm confused by what you report about FF "shooting the content to the right." Isn't that what you wanted when you set a 264px left margin?

cEM

vicksm

4:54 pm on Jun 1, 2005 (gmt 0)

10+ Year Member

Hi cEM

Thank you for your reply. The doctype I am using is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

When FF shoots the content to the right, it overshoots the 264px, so that the content sits outside of the wrapper div.

Vicky

createErrorMsg

9:18 pm on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Vicky, a few more questions.

One, FF overshoots the 264px by approx. how much?

Two, can you post more code? Seeing the html and css for the wrapper and surrounding elements would be helpful.

cEM

Farix

9:54 pm on Jun 1, 2005 (gmt 0)

10+ Year Member

Ok you have a box that hast a total width of 744px with a left margin of 264px and a content area width of 480px. Is that what you intended or was it something else? I would try this block by itself on a test page to see if it works properly. If it does, then something else on the page is giving you problems.

I would also suggest installing the Web Developer [chrispederick.com] extension for FireFox to help you with your problems. It has an option to show you exactly where the sides of your block-level elements are located.

vicksm

9:55 am on Jun 2, 2005 (gmt 0)

10+ Year Member

Hi cEM and Farix

THank you for your replies. I'm posting the entire css and html which may clarify what I'm trying to acheive - sorry, a bit unwieldy, but it should help. Currently I am using the css code which looks fine in IE, FF and Netscape, but which throws everything out in Opera.

Thanks again in advance for any advise you may be able to give.

Vicky

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Workham Hotels and Venues</title>
<link href="venues_services.css" rel="stylesheet" type="text/css" />
<link href="workhammenu.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>

<body>
<div id="horizon">
<div id="wrapper">
<div id="conferences"><a href="index.htm"><img src="images/logo.gif" alt="Workham hotels and venues logo" width="228" height="76" border="0" /></a></div>
<div id="header"><h1>Workham Hotels and Venues</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Hotel and Venue Portfolio </a></li>
<li><a href="services.htm" id="current">Services</a></li>
<li><a href="#">Contact Us </a></li>
</ul>
</div>
<div id="main">
<p> </p>
<p><a href="#" id="current">Meetings</a></p>
<p><a href="#">Loyalty Programme</a></p>
<p><a href="#">Special Offers</a></p>
<p><a href="#">Booking Forms </a> </p>
</div>
<div id="sidebar">
<h2>Meetings</h2>
<p>consectetuer adipiscing elit. Mauris vel magna. Mauris
risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare,
felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy
diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Nam ornare,
felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy
diam ligula ut risus. </p>
<p>onsectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique
varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus
molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus.
Praesent varius.</p>
<p> </p>
</div>
<div id="base">
<div class="float_left"> <a href="#">Hotels and Venues enter here</a> � <a href="#">Sitemap</a></div>
<div class="float_right"> Telephone: 0870 #*$! #*$!x� Email: <a href="mailto:sales@domain.com">sales@domain.com</a></div>
</div>
</div>
</div>

<div id="footer">
Copyright © Workham Hotels and Venues 2005 � Web design by <a href="www.azuremarketing.com" target="_blank">Azure
Marketing</a></div>
</body>
</html>

CSS:

body
{
background-color: #30150E;
margin: 0px
}

/* styles for IE 5 Mac */
#horizon {
background-color: #75949E;
position: absolute;
top: 20px;
left: 20px;
}

/* following rules are invisible to IE 5 \*/
#horizon {
top: 50%;
left: 0px;
width: 100%;
margin-top: -220px;
text-align: center;
min-width: 750px;
}
/* end IE 5 hack */

#wrapper {
background-color: #fff;
position: relative;
text-align: left;
width: 750px;
height: 380px;
margin: 0px auto;
border: 12px solid #fff;
}

#header {
background-color:#fff;
margin: 0 0 10px 0;
}

h1 {
width: 750px;
height: 136px;
text-indent: -9999px;
font: 8px Verdana, Arial, Helvetica, sans-serif;
background: url(images/serviceshead.jpg) no-repeat right;
margin: 0;
padding: 0;
}
.crumbs {
font: 10px Arial, Helvetica, sans-serif;
color: #8AB1C7;
}

/* nav */
#nav {
margin-left: 264px;
font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif;
width: 486px;
background-color: #CBBD86;
height: 25px;
clear: both;
}

#nav ul{
margin-left:0;
padding-left:0;
white-space: nowrap;
color: #30150E;
background-color: #CBBD86;
}

#nav ul li{
display:inline;
}

#nav ul li a {
padding: 3px 7px;
background-color: #CBBD86;
color: #fff;
text-decoration: none;
float: left;
border-left: 1px solid #fff;
}

#nav ul li a:hover {
color: #30150E;
text-decoration: none;
}

#nav ul li a:visited {
color: #fff;
text-decoration: none;
}

#nav ul li a:hover {
color: #30150E;
text-decoration: none;
}

#nav a#current {
color: #52676F;
}

/* main referring to left side bar */

#main {
float: left;
width:200px;
\width:220px;
w\idth:200px;
margin:0;
padding:10px;
background-color:#fff;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #9E8875;
clear: both;
height: 199px;
}

#main h2, #main h3, #main p {
padding:0;
}

/* left hand nav */

#main a {
padding: 0;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #9E8875;
}

#main a:link, #main a:visited {
color: ##9E8875;
text-decoration: none;
}

#main a:hover {
color: #75949E;
}

#main li a#current {
border: 1px solid #333;
background-color: #af0021;
color: #fff;
width: 200px;
height: 27px;
padding: 4px;
}

#main a#current {
color: #52676F;
}

/* sidebar referring to main content section */

#sidebar {
background-color:#fff;
margin: 6px 0 6px 44px;
font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
color: #30150E;
border-top: 2px solid #75949E;
width: 480px;
height: 199px;
overflow: auto;
}

#sidebar h2 {
padding:6px 0 0 0;
font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif;
color: #75949E;
}

#sidebar p {
padding:0;
}

#sidebar a:link {
color: #75949E;
text-decoration: none;
border-bottom: 1px dotted #75949E;
}

#sidebar a:visited {
color: #75949E;
text-decoration: none;
border-bottom: 1px dotted ##75949E;
}

#sidebar a:hover {
color: #75949E;
text-decoration: none;
border-bottom: 1px solid #75949E;
}

* html #sidebar {margin-left:264px;}

/* floats */
#conferences {
float:left;
position:absolute;
margin: 0;
z-index: 100;
width: 221px;
}

.imageright {
float: right;
padding: 7px;
margin-left: 10px;
}

.venues {
vertical-align: middle;
}

/* footer */

#footer {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: white;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block;
}

#footer a {
color: #fff;
text-decoration: none;
}

#footer a:hover{
color: white;
text-decoration: underline;
}

img {
border: none;
}

/* bottom of content window */

#base
{
padding-left: 6px;
position: absolute;
top: 412px;
left: 10px;
width: 730px;
height: 15px;
visibility: visible;
display: block;
color: #9E8875;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}

#base a:link, #base a:visited {
color: #9E8875;
text-decoration: none;
}

#base a:hover, #base a:active {
color: #9E8875;
text-decoration: underline;
}

div.float_right {
float: right;
}

div.float_left {
float: left;
}