Doesn't make multiple columns in Explorer for Windows 2

[dmacster]

Hi all. I've this page using some modifications from the gracious jpadie, but in Windows Explorer, the holder area drops below the content and the column is only a single column. Does anyone else see a problem in different browsers on this page?

http://capegazette.powweb.com/listings.php

Firefox and Safari on Mac fine. I don't have a windows system here to test on - the only ones in the corporate chain use Explorer and I don't have privileges to install other browers.


Clues?

Thanks,
Donna

 

[southbeach]

Your problem is with CSS. If you are going to use fixed widths, you might as well use absolute position. Your problem is that the total width used exceeds the screen area thus bumping your right layer down. If you were to view your page on a very high resolution, IE will display fine. IE treats widths, padding, margins way different from every one else.

I suggest your read up on CSS float ...

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

http://www.quirksmode.org/css/clearing.html

http://www.positioniseverything.net/easyclearing.html

You can find many, many more online.

Good luck!



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[jpadie]

i would simply do this: add an overflow declaration to wrapper

#wrapper{overflow:hidden;}

 

[dmacster]

Hmm - I like the simpler option. I don't know if the lack of multiple columns will be an issue with them, but I'll look at that further.

Thanks,
Donna

 

[southbeach]

Overflow: hidden will not shrink a fixed width layer to make it fit side by side with the left layer.

As I understand it, this will simply cut-off content within the layer should it exceed the layer's width. If I am not mistaken, you then run the risk of having incomplete sentences since the portion that would overflow (go beyond the layer's boundaries) will be hidden or truncated.

Get rid of the fixed width and see what happens or set it to "auto important" ... That is of course, if overflow: hidden does not solve your problem.

Regards,



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[jpadie]

nope. overflow:hidden on the div that wraps the float will 'clear' the float.
in the same way that adding an extra <div> mark up will.

 

[southbeach]

And here I am thinking that clear: all does that - I guess I should read the links I provided


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[jpadie]

actually, Donna: you seem to be using tables. didn't the table code i produced automatically put things in two columns? or are you using the css variant?

 

[dmacster]

Sorry - been at work all day.

jpadie - the tables are just for the content on the left side - the design they use will change to all layers at some point. The actual content is in divs.

The table version gave some weird spacing, so we went with the second layer approach.

Works fine in Firefox for windows also, just the Explorer won't make two columns for some reason. That may also be a sizing issue, but from what I can remember I have the columns in the php set at 44 percent or less. I don't have access to the files here at work. I'm planning on reworking this tomorrow to try to fix.

Thanks,
Donna

 

[dmacster]

I changed the width of the wrapper and windows IE sees the background okay now, but I still can't make the columns for the actual listings come out as multiple in that browser.

Here's what I'm using in that area

$rows = new newsPaperColumnsCSS(2, $data);
echo <<<CSS
<style type="text/css">
    .categoryName {font-weight:bold; text-align: left; color: #006666; padding: 1px; font-size: 95%; line-height: 110%; padding-top: 10px; text-align: left;}
	.categoryName a:link { color: #000000; font-weight: bold; text-decoration: none; }
 	.categoryName a:visited { color: #000000; font-weight: bold; text-decoration: none; }
 	.categoryName a:hover { color: #1176bc; font-weight: bold; text-decoration: underline; }
    .advertiser {font-family: Georgia, "Times New Roman", Times, serif; text-align: left; font-weight:normal; font-size: 80%; color: #006666; padding: 1px; text-align: left;}
	.advertiser a {text-decoration: none;}
	.advertiser a:link { color: #003a81; font-weight: bold; }
	.advertiser a:visited { color: #003a81; font-weight: bold; text-decoration: none; }
    .advertiser a:hover { color: #1176bc; font-weight: bold; text-decoration: underline; }
	.column {width:40%; float:left; margin-left: 80px; min-width: 300px;}
    .dbwrapper {width: 900px; min-width:760px; margin:0 auto; }
</style>

CSS;

Do you think it's just an issue with windows IE? This page will probably only be used for about a month before they go to a new style, but the new style still doesn't show the multiple columns in IE.

Thanks,
Donna

 

[jpadie]

can you give dbwrapper an overflow or auto.
the min-width on dbwrapper will not do anything as you have set the actual width to an absolute amount rather than a percentage. or if it does something it will be to force the actual width to 760px.

i suspect this is what is causing you the trouble as the two columns of 300 + 80 will equal 760. but you have not zeroed out the implicit padding and margins within IE first. so even an extra pixel will mean that the column is too wide and will be bunged below.

rationalise the css a bit as follows

.column {width:360px; float:left; margin-left: 80px;}
.dbwrapper {width: 900px; ; margin:0 auto; overflow:hidden;}

 

[dmacster]

Okay - I'm trying that - with the exception of the overflow:hidden part - destroyed everything on my end. I'm waiting to hear back since I'm on Mac and can't view the windows Explorer myself until I get to work tomorrow. Makes sense though, on the widths.

I'll let you know.

Thanks,
Donna

 

[jpadie]

what do you mean by 'destroyed everything'? setting an explicit overflow on the container of floated elements is now the 'best-practice' way to clear. if you have different experiences then we'd love to hear.

it's the margins that are killing it though. this code

.column {width:450px; float:left; padding-left: 80px;}
.dbwrapper {width: 900px; margin:0 auto; padding:0; overflow:hidden; }

works for the columns, although for me side b is still below side_a.

 

[jpadie]

it's the widths on the clearName and date divs that are mucking up the side_a and side_b issues. they're divs, so leave the width blank and they will take up the whole line. for some reason IE was getting upset about the widths.
tested in IE6 and IE7

 

[dmacster]

Ooh - I'll check that out. I should also say my test file is

http://capegazette.powweb.com/listings3.php

since I didn't want to overwrite my original.

thanks,
donna

 

[dmacster]

Hmm - when I clear the widths on both of those, I get really odd results at

http://capegazette.powweb.com/listings3.php

donna

 

[jpadie]

more IE vs rest of world. i have to say that i've not coded for IE for a long time. thank the Big G.

quick solution would seem to be add a clear:both to .dbwrapper

 

[dmacster]

This is the link to the last suggestion

http://capegazette.powweb.com/listings3.php

and this is the link to one with defined widths but the difference in the php section that you had mentioned earlier

http://capegazette.powweb.com/listings4.php

Since I can't see in Windows at the moment, can anyone if there's a difference? The listings3 page for me breaks with the first listing column to the right of the date line, and the second column of listings lower on the left. strange.

thanks,
donna

 

[jpadie]

this works for me

<style type="text/css">
<!--
body {
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	margin: 0px;
	padding: 0px;
	background-color: #000033;
}
a {
	text-decoration: none;
}
#clearName {
	text-align: center;
	position: relative;
	height: 110px;
	clear: both;
}
#date {
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-top: .25em;
	text-align: center;
	height: 40px;
	font-size: 1em;
	margin-top: 20px;
	background-image: url(graphics/hedbg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	margin-right: 10px;
	margin-left: 10px;
}	
#wrapper {
	text-align: left;
	margin: 0px;
	padding: 0px;
	border:0;
	width: 1250px;
	background: #000033;
}
#header {
	background: #003366;
	width: 980px;
	height: 24px;
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: .7em;
	text-align: center;
	margin: 0px;
	position: absolute;
	left: 160px;
	top: 0px;
	padding-top: 2px;
	padding-bottom: 3px;
	line-height: 6px;
}
#sideLeft a {
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	font-size: .7em;
	padding: 1px;
}	
#side-a {
	float: left;
	width: 150px;
	background-color: #000033;
}

#side-b {
	margin: 0;
	float: left;
	width: 1000px;
	background-color: #fffcf6;
	background-image: url(graphics/adshowocean.jpg);
	background-repeat: no-repeat;
	background-position: center 24px;
}

#footer {
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 0.7em;
	color: #000033;
	text-align: center;
	width: 980px;
	position: relative;
	clear: both;
}
    .categoryName {font-weight:bold; text-align: left; color: #006666; padding: 1px; font-size: 95%; line-height: 110%; padding-top: 10px; text-align: left;}
	.categoryName a:link { color: #000000; font-weight: bold; text-decoration: none; }
 	.categoryName a:visited { color: #000000; font-weight: bold; text-decoration: none; }
 	.categoryName a:hover { color: #1176bc; font-weight: bold; text-decoration: underline; }
    .advertiser {font-family: Georgia, "Times New Roman", Times, serif; text-align: left; font-weight:normal; font-size: 80%; color: #006666; padding: 1px; text-align: left;}
	.advertiser a {text-decoration: none;}
	.advertiser a:link { color: #003a81; font-weight: bold; }
	.advertiser a:visited { color: #003a81; font-weight: bold; text-decoration: none; }
    .advertiser a:hover { color: #1176bc; font-weight: bold; text-decoration: underline; }
	.column {width:360px; float:left; margin-left: 80px;}
	.dbwrapper {width: 900px; ; margin:0 auto; clear:both;}

-->
</style>

 

[dmacster]

Thanks, jpadie. I've been ill for the past week, so I'm just getting to look at this.

Donna