Alignment of Div's affected by border, no border in FF

Discussion in 'CSS' started by snowrider, Sep 11, 2007.

0
  1. #1
    I am designing a layout for a personal site and having a few problems.

    You can view the wrong layout here: http://www.uvm.edu/~cgermain/css/ (click the weblayout.html file for the page, the CSS file is also in that directory)

    In the CSS file, when the border attribute:

    border: outset thin solid #000000;

    is added to the #leftlinks div and the #maincontent div it bumps the #maincontent div down below the #leftlinks div (as seen in the link above). When that border attribute is removed from both divs the #mainlayout div aligns nicely to the right of the #leftlinks div.

    Is the border causing a spacing problem because my height and width are defined as pixels? Any help would be much appreciated.

    Probem #2
    None of these borders show up in FireFox, but they show up in IE. Is my code wrong?
     
    snowrider, Sep 11, 2007 IP
  2. snowrider

    snowrider Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Correction: The layout is viewed incorrectly in IE, not Firefox. The layout is correct in Firefox, but there are no borders at all even though they should be showing.
     
    snowrider, Sep 11, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Well, let's see... first you are using what I like to call the 'goofy' reset - if we're gonna reset, let's blanket with the universal selector.

    That clearing DIV AFTER the footer doesn't do a thing, we can delete that outright.

    You are assinging vertical-align to body - which does exactly two things, and jack left town... axe that.

    Fixed height declaration on your wrapper - NEVER a good idea for a site design.

    And here's PART of your issue - border-width:thin; - that does NOT have a fixed meaning cross browser. State it in PX, or don't bother.

    You do know that border width is added to your total width, right? Width:790px; plus border-width:thin equals 790px PLUS whatever thin means... so if thin is 1px, your #banner for example would end up 792px wide, wider than your #wrapper. Personally, I would just let all those subsections auto-size and declare 1px instead of 'thin'.

    On #navbar you are declaring BOTH outset and solid - since those target the same property which is it?

    #topcontent you declare your background-color twice - whcih is it?

    The inclusion of the align property is just confusing matters, get rid of that...

    Hmm, the typo between the stylesheet and document, where the stylesheet says #maincontent and the document says id="mainContent" could be a culprit too...

    I think THIS is what you are trying to do...

    <!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>Main Layout Test</title>

<!-- <link href="screen.css" rel="stylesheet" type="text/css" media="screen, projection" /> -->

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}	

body {
	font:normal 100%/140% verdana,arial,helvetica,sans-serif;
	text-align: center;
	color:#000;
	background:#FFF;
}

#wrapper {
	width:790px;
	margin:10px auto;
	border:1px solid #333;
	text-align:left;
}

#banner {
	height:79px;
	color:#FFF;
	background:#000;
	border:1px solid #000;
}

#navbar {
	height:26px;
	background:#FF0;
	border:1px outset #000;
	background-color:#FFF;
	text-align:center;
}

#topContent {
	height:150px;
	border:1px outset #000;
	background:#369;
}


#sideLinks {
	float:left;
	width:150px;
	height:300px;
	background:#063;
	border:1px outset #000;
}

#mainContent{
	float:left;
	width:636px;
	height:300px;
	background:#CCC;
	border:1px outset #000;
}


#footer{
	clear:both;
	height:20px;
	border:1px outset #000;
	background-color: #900;
}

</style>

</head><body>

<div id="wrapper">
	<div id="banner">Banner</div>
	<div id="navbar"> Navigation</div>
	<div id="topContent">Top Content Top Content Top Content Top Content</div>
	<div id="sideLinks">Left Links</div>
	<div id="mainContent">
		<p>Main Content</p>
		<p>Main Content</p>
		<p>Main Content</p>
		<p>Main Content</p>
		<p>Main Content</p>
	</div>
	<div id="footer">footer</div>
</div>

</body></html>
    Code (markup):
    Just remember that thanks to the borders, #footer, #topContent, #navbar and #banner are all now 788px wide internally.

    It's all about the math, and when it comes to flow the borders COUNT.
     
    deathshadow, Sep 11, 2007 IP