CSS - Division Trouble Please Look At It

i have a layout like so:
Image here
the reason for the main block was to see if i could set the footer to the bottom of the main block so that it would stay below the content column,

ive added a border to the main block to see where it is, and it only seems to go around the header and footer, ignoring the middle columns.

You can view the site here, the big border at the top is the border around the main part

Hi,

I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE...

In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot!

This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; }
TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; }
A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; }
A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; }
A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; }

#poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px}
#poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold }

select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
.pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}

.pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline}
.pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}


.date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none}

body {
SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA;
; background-color: D8E0E9
}
FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; }
TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )}



And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work

OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at:

http://www.getbrightstar.com/v2/

And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing.

Thanks,
-Daniel

http://lovemeforme.org/ang/

I realize it's because of the float: right and float: left, but I put it in a container with a set width, but it's made no difference. I can't put a margin-left/margin-right to them because the layout is centered and it won't work on other resolutions..

hmm, any ideas?
Thanks!

hi I have this..
http://www.thehundreds.com/thewall/index.php

as u can see the threads to the right are acting up once the float
of the login is done, because the height is not the same.. is there
anyway to force the threads div to continue to line up, or better yet, have that div to the right of the login without using a float??

Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be.

Quote:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="testcss.css" />
</head>

<body>
<div id="wall2">
<a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) -->
</div>
</body>

</html>


And the css....

Quote:
body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;}
a{color:blue; border:0; padding-bottom:0px; padding-top:0px;}
a:hover{color:#DE7008;}
img { border:0; padding-bottom:0px; padding-top:0px;}
div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; }
img#unsold {border:0px; padding:0px; margin:0px;}


The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row.

Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers.

The code is XHTML and CSS validated.

Gareth.

ok im having some trouble with the layout of some stuff. i have my webpage set up so i have a <div> floating to the left and a content area to the right. in my "content" area, i have an img where i used "float:left;" so i can have text to the right of it. but now after that, i have <br clear='left' />. the problem is that when i put that break in there, it clears the float for the first <div>. is there anyway around this? here is some sample code.

Code:

<html>
<head>
<style type="text/css">
div{
float:left;
width:150px;
color:red;}
</style>
</head>
<body>
<div>
<p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<img scr='fake.jpg'>
<p>text</p>
<br clear='left' />
<p>text under thats not susppose to clear float to the left</p>
</body>
</html>

i have a small image in a big div, and when one rolls over any part of the image or the div the background color of the div changes and the image swaps out. i dont know why, but im having a hard time getting this done. i feel like its simpler than i am envisioning it. any help would be much apreciated.

ben

Hi,

I am having some trouble laying out this page:

http://209.123.229.141/racing_profile.php?user=2
(Username: devshed Password: css)

I want the 'Latest Media' Box positioned in the middle of the left hand side, the 'Latest Replays' box in the middle of the right hand side and the 'Latest Events' box below both.

I have floated them to the left and right and cleared the floats for the 'latest events' div, but the media and replays div won't floar in the "middle" of each side.

The CSS for the page is: http://209.123.229.141/css/racing_profile.css

Code:

<div class="message">
  <table>
    <tr>
      <td>Hello World</td>
    </tr>
  </table>
</div>

Code:

div.message
{
   border: 1px solid #000000;
}

For some reason that does not produce a border around the div. Is there a reason why not?

I'm having trouble with creating a nav bar in css. The code I'm using is this for the html:

Code:

<div id="wrap"> 	<div id="nav"><a id="home" href="#" title="home"><span>home</span></a> 	</div> </div> <div id="bottom"></div> </div>

and this for the css:

Code:

@charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x;  }  #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; }  #wrap { background-color: #FFFFFF; border-color: #660000;  border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; }  #nav { height:50px; }  #home {   display: block;   width: 226px;   height: 50px;   background: url("home.gif") no-repeat 0 0;  }  #home:hover {    background-position: 0 -50px; }  #home span {   display: none; }

The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you.

Hi,

I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it.

Here is the link:
http://www.greatstreetsstlouis.net/...d=32&Itemid=204

I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you.

Here is the code:

Code:

.extmenu .modulebdr div div div #mainlevel {
    font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
    background: url(../images/bullet_arrow_down.gif) left center no-repeat;
    padding-left:11px;
    color:#2E69BF;
	font-weight:bold;

}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
    background: url(../images/bullet_arrow_down.gif) left center no-repeat;
    padding-left:11px;
    color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
    background: url(../images/bullet_arrow_down.gif) left center no-repeat;
    padding-left:11px;
    color:#2E69BF;
	font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
    background: url(../images/bullet_arrow_right.gif) left center no-repeat;
    padding-left:9px;
    color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
    padding-left:9px;

	}

.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
    color:#666666;
	margin-left:14px;
}

.extmenu .modulebdr div div div #mainlevel li .sublevel_active { 
    padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active { 
    margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current { 
    margin-left:10px;
}

.extmenu .modulebdr div div div ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current { 
    margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel { 
    margin-left:7px;
}

hey i need some help. the website and the css is good and works normally...however when i edited the website file through Dreamweaver MX, it got distorted!!!...the only thing I changed was the "page properties title name" and that was it and after that the right side of the frame shifted below the menu which was on the left side!!!!

i even went back to change the title name back but it wouldn't go back to its original left right style. what do i do?