CSS - Box Too Wide In Netscape

Hi everyone

I have a 3 column layout with a footer. If the content ends up being too wide for the middle column (ie a large data table) I can't get the middle column to push the right hand column beyond the width of the screen. If the right column is absolutely positioned, the middle column just continues underneath the right column (overlaps). If the right column is floated right, it just drops down below the middle column. What I want it to do is bring up a horizontal scroll bar in the browser and let people scroll across for the right column.

Based on the code below, if anyone has any ideas I would be unbelievably greatful. I've been pulling my hair out all day...

My HTML is as follows:

Code:

<div id="content_container"> 
  <div id="lft"> 
   ... 
  </div> 
  <div id="mainbody"> 
   .... 
  </div> 
  <div id="rght"> 
   ... 
  </div> 
  <div id="footer"> 
   ... 
  </div> 
</div>

My relevant CSS is as follows:

Code:

#content_container { 
   position: relative; 
   min-height: 100%; 
   top: 0; 
   left: 0; 
   width: auto; 
   height: auto; 
   border: 1px solid red; 
} 

#lft { 
   float: left; 
   left: 0; 
   top: 0; 
   width: 24%; 
   visibility: visible; 
} 

#mainbody { 
   position: relative; 
   left: 0; 
   top: 0; 
   width: 50%; 
   height: auto; 
   visibility: visible; 
} 

#rght { 
   position: absolute; 
   right: 0; 
   top: 0; 
   width: 22%; 
   visibility: visible; 
   padding-right: 10px; 
} 

#footer { 
   float: left; 
   bottom: 0; 
   left: 0; 
   top: 0; 
   clear: both; 
   width: 100%; 
   margin-top: 40px; 
   padding-top: 15px; 
   padding-bottom: 15px; 
   visibility: visible; 
}

Probably there already was such question, but my Internet connection is very slow and I don't have time to search thru topics.

So, when I put an image into centercolumn that has big width my right column stays where it was, but center column with the picture goes to the right widely, and right column stays over the picture.
But I want right column always follow center column (stays on the right of centercolumn whatever size it is).

How to fix it in css?

here is my code:

BODY {
PADDING-RIGHT:0;
PADDING-LEFT:0;
BACKGROUND:url(img_86.gif) #ddd;
PADDING-BOTTOM:0;
MARGIN:0;
PADDING-TOP:0;
FONT-SIZE:12px;
LINE-HEIGHT:18px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

.registered {
BACKGROUND-COLOR:#ff9;
}

#centercolumn {
BORDER-RIGHT:#666 0 solid;
PADDING-RIGHT:4px;
BORDER-TOP:#666 0 solid;
PADDING-LEFT:4px;
PADDING-BOTTOM:10px;
MARGIN-LEFT:179px;
BORDER-LEFT:#666 0 solid;
MARGIN-RIGHT:179px;
PADDING-TOP:10px;
BORDER-BOTTOM:#666 0 solid;
}

#header {
PADDING-RIGHT:8px;
BORDER-TOP:#182746 2px solid;
PADDING-LEFT:8px;
BACKGROUND:url(img_87.gif) #314e8c;
PADDING-BOTTOM:8px;
PADDING-TOP:8px;
BORDER-BOTTOM:#182746 2px solid;
}

#leftcolumn {
MARGIN-TOP:4px;
LEFT:0;
WIDTH:180px;
POSITION:absolute;
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

#rightcolumn {
MARGIN-TOP:4px;
RIGHT:0;
WIDTH:180px;
POSITION:absolute;
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

#footer {
CLEAR:both;
MARGIN-BOTTOM:12px;
}

.block {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:4px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:4px;
BACKGROUND:#fff;
PADDING-BOTTOM:4px;
MARGIN:6px 6px 12px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.block H3 {
PADDING-RIGHT:4px;
PADDING-LEFT:4px;
FONT-SIZE:11px;
BACKGROUND:#a7b6c9;
PADDING-BOTTOM:4px;
MARGIN:-4px -4px 4px;
COLOR:#26344c;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.block P {
MARGIN:0;
}

.content {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:4px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:4px;
BACKGROUND:#fff;
PADDING-BOTTOM:4px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.entrycontent {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:12px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:12px;
BACKGROUND:#fff;
PADDING-BOTTOM:12px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:12px;
BORDER-BOTTOM:#999 1px solid;
}

.content P {
MARGIN:4px 2px;
}

H1 {
DISPLAY:inline;
FONT-SIZE:16px;
MARGIN:4px;
COLOR:#fff;
}

H2 {
PADDING-RIGHT:2px;
PADDING-LEFT:2px;
FONT-SIZE:13px;
PADDING-BOTTOM:2px;
MARGIN:0;
COLOR:#26344c;
PADDING-TOP:2px;
BORDER-BOTTOM:#999 1px dashed;
}

H3 {
FONT-SIZE:13px;
}

.entryfooter {
CLEAR:both;
PADDING-RIGHT:0;
PADDING-LEFT:0;
FONT-WEIGHT:normal;
FONT-SIZE:11px;
PADDING-BOTTOM:6px;
MARGIN:0;
COLOR:#666;
LINE-HEIGHT:16px;
PADDING-TOP:6px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
TEXT-ALIGN:right;
}

.entryfooter_linkdump {
PADDING-RIGHT:0;
PADDING-LEFT:0;
FONT-WEIGHT:normal;
FONT-SIZE:10px;
PADDING-BOTTOM:6px;
MARGIN:0;
COLOR:#666;
LINE-HEIGHT:16px;
PADDING-TOP:6px;
BORDER-BOTTOM:#666 1px dashed;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
TEXT-ALIGN:right;
}

A {
COLOR:#253a69;
}

.prevnext_links {
FLOAT:right;
COLOR:#fff;
}

.searchbox {
FONT-SIZE:10px;
WIDTH:10em;
}

.searchbutton {
BORDER-RIGHT:#000 1px solid;
BORDER-TOP:#000 1px solid;
FONT-SIZE:10px;
BORDER-LEFT:#000 1px solid;
BORDER-BOTTOM:#000 1px solid;
}

IMG.badge {
BORDER-TOP-WIDTH:0;
BORDER-LEFT-WIDTH:0;
BORDER-BOTTOM-WIDTH:0;
MARGIN-BOTTOM:2px;
BORDER-RIGHT-WIDTH:0;
}

A IMG.badge:hover {
MARGIN-BOTTOM:1px;
BORDER-BOTTOM:#314e8c 1px solid;
}

P,HTML,TABLE,TD {
FONT-SIZE:12px;
LINE-HEIGHT:18px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

#leftcolumn P,#rightcolumn P {
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

H4,.subtitle {
DISPLAY:inline;
FONT-SIZE:14px;
MARGIN:4px;
COLOR:#fff;
FONT-STYLE:italic;
}

.date_linkdump,.date {
FONT-WEIGHT:normal;
FONT-SIZE:10px;
FLOAT:right;
COLOR:#666;
LINE-HEIGHT:16px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

.entryfooter A,.date A,.entryfooter_linkdump A,.date_linkdump A {
FONT-WEIGHT:bold;
COLOR:#5c6b8e;
TEXT-DECORATION:none;
}

.date A:hover,.entryfooter A:hover {
FONT-WEIGHT:bold;
COLOR:#5c6b8e;
TEXT-DECORATION:underline;
}

H1 A,.prevnext_links A {
FONT-WEIGHT:bold;
COLOR:#fff;
TEXT-DECORATION:none;
}


and here's screenshot

Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas?

Code:

#page_top_sizing {
	background-color: red;
	width: 764px;
	height: 130px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index:1;
	padding:0;
}

Thanks.

This is the line in my index.html:
PHP Code:
<PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> 





This is my PRE code in style.css:
PHP Code:
 PRE {
    BORDER-RIGHT: #2f6fab 1px dashed; 
    PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; 
    PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; 
    COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; 
    BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9;
    width: 90%;
}
PRE.yup {
    COLOR: #000000;
    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
    FONT-SIZE: 12px;
    text-align: left;
    width: 80%;
    margin: 12px auto;
} 





The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas?

Hello, I'm afraid I'm back with more problems

I have a 3 column layout. the Left column is floated left, right floated left and the middle column uses left and right margins. I then had cause to set a width on the middle column to give something with Layout for IE.

When I add the width to the middle column, it looks fine in firefox but for some reason in IE, my middle div drops underneath the two floated divs, as if it is too wide.

I have tried debuging by using background colours on the Divs and the width of the coloured area is the same in both browsers. It is as if there is something leaking out the sides. Even on this most basic example. Am I missing something basic?

Code:

<div id="wrapper" style="width:996px; background-color:#666666; margin-left:auto; margin-right:auto;">
	<div id="lbar" style="float:left; width:170px; padding-left:10px; background-color:#FF0000; ">
	  <p>left</p>
	</div>
	<div id="rbar" style="float:right; width:305px; background-color:#0033FF;">
	  <p>right</p>
	</div>
	<div id="middle" style="margin-left:190px; width:491px; margin-right:315px; background-color:#99CCCC;">
	  <p>middle</p>
	</div>
</div>

Thank you for any time taken in reading this

JJ

Hi guys,
I've got both long and wide table to be showed and printed.
Customer would like that for scrolling, some left columns will freeze on the left (when printed, will be printed on every page), same for table header (fixed when scrolling, repeated on top of every page when printing).
For fixed table headers, there are lots of tutorials, like:
http://www.cssplay.co.uk/menu/tablescroll.html
And for printing, good browsers can repeat thead on every page (don't know how to achieve this for IE).
But for columns locking (repeating for print), I'm totally stuck. Yes, some stuff can be found for scrolling, like:
http://web.tampabay.rr.com/bmerkey/...column-csv.html
But these solutions usually use JavaScript or are not cross-browser.

Is there any way how to do this?
Primarily for IE 6.0/7.0

I can't connect to W3C CSS and HTML tutorials. Does anyone else have the same problem?
http://www.w3schools.com/css/default.asp

Whats wrong? Did the Iceland Volcano ash break down the site?

Does any one have another good resource that is as concise as WC3?

i'm new at CSS, and the width works fine in IE but not in Netscape. I'm trying to get #bottomLeftFirst1 to be the same width as #bottomLeft, but for some reason #bottomLeftFirst1 is wider in Netscape. Thanks!

#bottomLeft
{
position: absolute;
width: 175px;
height: 100%;
padding: 0;
margin: 0;
}

#bottomLeftFirst1
{
border-width: 1.5px;
border-style: none none none none;
width: 175px;
margin: 0;
padding: 5px 0 5px 10px;

}

I have made some pages with css styling.

This works perfect with IE, but he just ignores the css styling in netscape.

An example, I made an tumbnail from a picture, set the size in css, works perfect in IE, but he ignores it in netscape.

See example
http://www.bvkb.be/BVKB/Sportklimme...finale/test.php

Can anywhone help me how this comes.
On another page he takes some of the css, en some not.


Thanks

Hi,
This is the first day i am tackling css. Please Explain why my site is looking different in netscape as opposed to IE, (ie is the correct look).
This is the link http://www.eac.net.au/remax/template1/new_apartment.htm .

I am also attaching my css file, let me know if i am on the right track for using CSS

THANKYOU

uno_turko

Hello all, Wondering if those of you who love netscape more than I do can help me,

This is a little css script to get a bg image to show in the top right hand corner of a table the table

Its called from <td class="rightnav">

Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag?

I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating

.rightnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-image: url(images/continued.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
height: 100%;
white-space: normal;
display: block;
overflow: hidden;
}

any help apreciated =)

- Shell.

hi,

ive been creating a website for a project and ive used css throughout. Im not experienced with css but managed to develop a decent front end. My problem is that although it displays perfectly in IE it messes up in netscape. Im not sure which parts of the css conflict. Can anyone suggest anything or point me to some website that may help? Cheers

The screenshot from netscape is below, its mainly the footer top line and the navbar which fails to span the full screen width.

Netscape screenshot

This is one of the pages for comparison
Main site

Thanks in advance for any help

I'm sure there is a simple solution, but I'm drawing a blank. I'm trying to line up absolute divs but running into an issue where IE includes the border in the width and Netscape appears to tack the borders on - so if I have a div with a width of 100px and a border of 5px, IE diplays 100px, inclusive of the border. Netscape appears to dispay a div with a total width of 110px.

<div align="center" class="box" style="top:49px; left:111px; width:100px; height:100px"><br>Test<br></div>

.box {position:absolute; border: 5px double black; font: 200 9px arial}


Havn't been able to find the property that may control this.

????

Ok so ive got me site looking great on IE, Mozilla, Firefox but still have a problem with Netscape! It's only a small problem but if anyone can help me solve it I would be greatful!

http://www.magickev.co.uk

In IE, Firefox, Mozilla the main logo is right at the top of the screen and the text box is at the top of the grey area. In netscape there is about a 10 pixel gap, does anyone know how I can get rid of this gap? I have tried everything but to no avail!

http://www.freewebs.com/magickev/index.htm - HTML source

http://www.freewebs.com/magickev/styles.css - CSS source

Thanks, Kev

Greetings Yall,

I am having a big problem, I am woeking on a site for a huge client and in netscape approx. 50px is cut off the top of the page and my tables sized to 100% cut off approx. 50px from the bottom.

I have no idea why or if it is evan a CSS problem at all....

Can anyone give some insight.

here is a link:
http://www.slbdrivingcentre.ca/dev/