CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

whats wrong with this css ???

Discuss whats wrong with this css ??? in the CSS Help forum on Dev Shed.
whats wrong with this css ??? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old March 1st, 2004, 10:38 PM
Sotonin Sotonin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Posts: 448 Sotonin User rank is Private First Class (20 - 50 Reputation Level)Sotonin User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 12 h 25 m 25 sec
Reputation Power: 6
whats wrong with this css ???
This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column.

Code:
body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Arial', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}

#caption {
	font-style: italic;
	font-weight: bold;
	padding-top: 5px; 
}

#frame {
	width:750px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	text-align:left;
}

#header {
	float: left;
	width: 751px;
	height: 55px;
	background: #ccc url(/greydusk/images/header_back.gif);
}

#leftcolumn {
	float: left;
	width: 505px;
	background:#fff;
	margin-top: 0px;
	margin-left: 2px;
	padding-bottom:20px;
}

#title {
	display: block;
	font-weight: bold;
	font-size: 15px;	
}

#date {
	float: left;
	margin-left: -35px;
	font-weight: normal;
	color: #9C9C9C;
}

#leftcolumn p {
	background:  url(/greydusk/images/marker1.gif) no-repeat top left;
	text-indent: 50px;
	padding-left: 15px;
	padding-right: 10px;
	margin-top: 35px;
}

#rightcolumn {
	float: left;
	width: 235px;
	margin-left: 5px;
} 

#rightcolumn p {
	padding-left: 15px;
	padding-right: 15px;
}

#menu {
	background-color: #000;
	width: 751px;
	font-size: 14px;
	color: #FFF;
}

#menu ul {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0px;
}

#menu li {
	float: left;
	margin: 0 0 0 0;
	padding-right: 15px;
	padding-top: 4px;
	padding-left: 15px;
	padding-bottom: 7px;
}

#menu li a {
	padding: 0px;
	padding-bottom: 3px;
	margin: 0 px;
	color: #fff;
	text-decoration: none;
}

#menu li a:hover {
	border-bottom: 4px solid #7F88DA;
	color: #7F88DA;
}


and here is the page.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>test site</title>
	<script type="text/javascript"></script>
	<style type="text/css" media="all">
		@import "/greydusk/css/greydusk.css";
	</style>
	
</head>

<body onload="window.defaultStatus='test-site';" id="test">

<div id="frame">
	<div id="header">
	<p>&nbsp;</p>
	</div>
	<div id="menu">
		<ul>
			<li><a href="blah.htm">home</a></li>
			<li><a href="blah.htm">news</a></li>
			<li><a href="blah.htm">forums</a></li>
		</ul>
	</div>	
	<div id="leftcolumn">
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
	</div>

	<div id="rightcolumn">
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
	</div>
</div>

</body>
</html>


thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =(
__________________
-Sotonin
Reply With Quote
  #2  
Old March 2nd, 2004, 01:40 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 23 m 11 sec
Reputation Power: 607
Ok, it's pretty simple. IE really screws up on floats. The fix actually fixes two things. First, a float does not actually occupy real estate in its containing block. IE mistakingly expands the container to enclose a float. Moz/NS, correctly, does not, so there must be content to expand the box. You'll notice that in NS, the menu does not have a black background. That's because it has zero height.

Then there is the problem you wrote about—the leftcolumn not being on the left. This is because it follows a float element (the menu list) is is correctly abutted on the left.

The simple fix is to add a clearing element immediately after the menu list. To test, I used <br style="clear: both" />.

See /*PIE*/ for some excellant articles on positioning, and the float model in particular.

As a side note, #title and #date should be classes, not ids.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

Ask a better question, get a better answer.
Reply With Quote
  #3  
Old March 2nd, 2004, 07:32 AM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,648 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 14 h 39 m 43 sec
Reputation Power: 571
you can fix it with placing a <br style="clear:both;" /> after the unordered list in the div element #menu.

but you got several problem with the rest of the markup.
first you use the same id more than once, id's are unique you can only use the same id once in a document, use class instead.
class="date", and in css .date instead of id="date" and #date

don't use a span to make a title use an appropriate h[1-6]tag.

just an example of what you can do:
(this also fixes some problems that occured in opera)
Code:
<h2>Sample news title, hello there!</h2>
<p>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</p>
<p class="date">March 1, 2004 | <a href="blah.com">Comments</a></p>

and the css for this:

#leftcolumn h2 {
	margin-top: 35px;
	font-size: 15px;
	margin-bottom:0;
	padding-bottom:0;
	padding-left: 15px;
}

#leftcolumn .date {
	color: #9C9C9C;
}

#leftcolumn p {
	padding-left: 15px;
	padding-right: 10px;
	margin-top: 0px;
	margin-bottom:0;
}


I aslo noted that you use doctype xhtml1.1,
remember that xhtml1.1 should be sent as application/xhtml+xml
http://www.w3.org/TR/xhtml-media-types/#summary

this might give you some trouble with non-conforming browsers
http://www.greytower.net/en/archive...tmlcontent.html
Last edited by Akh : March 2nd, 2004 at 07:39 AM.
Reply With Quote
  #4  
Old March 2nd, 2004, 09:58 AM
Sotonin Sotonin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Posts: 448 Sotonin User rank is Private First Class (20 - 50 Reputation Level)Sotonin User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 12 h 25 m 25 sec
Reputation Power: 6
Thanks for that trick, it worked like a charm!.

But now i'm plagued with yet another problem. You somewhat touched on it by saying the menu wasn't black. But i tried adding height: value and it didn't fix anything. So i changed the background-color to black on the li. This somewhat worked. now each list item is black. but the list itself does not extend the full intended width.

I tried setting UL to black, etc. nothing seems to work. the list just wont extend all the way in netscape.

any more advice would be great. thanks!!
Reply With Quote
  #5  
Old March 2nd, 2004, 12:27 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 23 m 11 sec
Reputation Power: 607
The <br style="clear: both" /> element must be immediately after the </ul>, and within the menu div. No other messing with those style rules is needed.

cheers,

gary

ps. As Akh said, xhtml 1.1 should be delivered as application/xhtml+xml. If you do that, though, IE goes stupid. Use doctype xhtml 1.0. gt
Reply With Quote
  #6  
Old March 2nd, 2004, 12:51 PM
Sotonin Sotonin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Posts: 448 Sotonin User rank is Private First Class (20 - 50 Reputation Level)Sotonin User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 12 h 25 m 25 sec
Reputation Power: 6
Thanks, you're the man!.

As far as the header, I'm not really even sure what all that garbage means to be honest, what should it say as the header? I don't want it to freak out in IE or anything like that.
Reply With Quote
  #7  
Old March 2nd, 2004, 10:06 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 23 m 11 sec
Reputation Power: 607
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />

  <title>test site</title>
  <style type="text/css" media="all">
    @import "/greydusk/css/greydusk.css";
  </style>	
</head>
That should do it. This is a good doctype to code to. Be sure to validate your html and css.

cheers,

gary
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > whats wrong with this css ???

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway.