SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Tallahassee
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Need help - Unknown problem

    Hello,
    This would be my second topic posted here, and would be my second all CSS layout attempted.

    I've created an all CSS layout that uses no images...but it does use some unsure fonts. Most do have Arial Narrow / Arial Black but there will be some that don't. I know who my visitors are and I think they will have no problem with the font

    Anyhow, I created the "header area"...everything shows great in IE, but once again I get shafted with mozilla.

    I need help, I have no idea what is messing up my layout and believe my I have tried alot of ways to fix it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>SKITSO | NET - CSS Test #2</title>
    <style>
    .constraint {
    	width: 680px;
    }
    
    div {
    	font-family: "Verdana";
    	font-size: 11px;
    	color: #333;
    }
    
    .header {
    	border-right: 5px #000 Solid;
    	width: 300px;
    	float: left;
    	margin: 0px 5px 0px 0px;
    }
    
    .header2 {
    	float: right;
    	width: 368px;
    	background: #fafafa;
    	border-top: 1px #f9f9f9 solid;
    	border-right: 1px #bbbbbb solid;
    	border-bottom: 1px #bbbbbb solid;
    	border-left: 1px #f9f9f9 solid;
    }
    
    .title { 
    	font-family: "Arial Black";
    	font-size: 38px;
    	text-transform: uppercase;
    	margin: 0px 0px -12px 0px;
    	display: block;
    }
    
    .moto { 
    	font-family: "Arial Narrow";
    	font-size: 22px;
    	font-style: italic;
    	margin: 0px 0px 0px 0px;
    	color: #555;
    	display: block;
    }
    
    .keywords {
    	font-family: "Verdana";
    	font-size: 10px;
    	margin: 0px 0px 0px 0px;
    	color: #888;
    	line-height: 11px;
    	text-align: justify;
    	padding: 2px;
    	display: block;
    }
    
    .slogan {
    	font-family: "Arial Narrow";
    	font-size: 22px;
    	margin: 0px 0px 2px 0px;
    	color: #F43FAF;
    	font-style: italic;
    	float: right;
    }
    
    .break {
    	clear: both;
    	height: 0px;
    }
    
    .welcome {
    	margin: 0px 0px 5px 0px;
    	border-top: 5px #000 solid;
    }
    
    .headerc {
    	width: 100%;
    	margin: 0px 0px 5px 0px;
    }
    </style>
    </head>
    <body>
    <div class="constraint">
    <div class="headerc">
    	<div class="header"> 
    		<span class="title">
    			Skitso
    		</span>
    		<span class="moto">
    			HQ Celebrity &amp; Supermodel Pictures
    		</span>
    	</div>
    	<div class="header2">
    		<span class="keywords">
    			Skitso provides <acronym title="High Quality">HQ</acronym> Celebrity and Supermodel Images.
    			Most pictures are scanned from the world's top fashion magazines and men's lifestyle periodicals
    			such as Maxim, FHM, GQ,Razor, and Stuff.
    		</span>
    	</div>
    </div>
    
    <div class="welcome">
    	This div right here is the problem. Can you help me? If you open this code up on IE, it displays FINE. In Mozilla 
    	is screws up! Why does Mozilla keep screwing me up? There this is enough text to show you my problem.
    </div>
    </div>
    </body>
    </html>

  2. #2
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add "clear: both;" to the div like this:

    Code:
    .welcome {
    	margin: 0px 0px 5px 0px;
    	border-top: 5px #000 solid;
    	clear: both;
    }

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Tallahassee
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now the margins don't work.

  4. #4
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you speaking of the margin right above the thick horizontal border that splits it from the thick vertical line? If so, then that can be fixed by adding a 5px bottom margin to the following div like this:

    Code:
    .header {
    	border-right: 5px #000 Solid;
    	width: 300px;
    	float: left;
    	margin: 0px 5px 5px 0px;
    }

  5. #5
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Tallahassee
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks soo much! Wow, this is great. I thought all hope was lost and started another version that uses tables to house the divs, lol.

    That just sorta made my day

    Could someone explain the clear: both; reasoning? I've used it before in previous layout simply because it was probably in the free base css layout I used. Now that I've learned a good bit, I just kinda start with an idea and have no need to use anyone else's layouts...so if someone could enlighten me I'd be happy.

  6. #6
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    clear: both; puts the div below any elements that are floating beside it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •