Textpattern CMS

#1 2006-06-27 20:29:14

Victor Lazarro

Member

From: Berlin

Registered: 2006-06-14

Posts: 127

Website

window in safari ok but trouble with IE ...

Hi there, i have two columns on the right side (sidebar1 & sidebar2) but if i try this in IE the sidebars going down below the context, itreyd out to change the width and so on, but i havent a clue what it can be …

the testserver is:

http://test06073.server174.isdg.de/

here are the css …

.narrowcolumn
{
	float: left;
	padding: 0 0 0 15px;
	margin: 0 0 0 0;
	width: 400px;
}

.widecolumn
{
	padding: 0 0 0 0;
	margin: 0 0 0 80px;
	width: 410px;
	line-height: 1.6em;
}
#sidebar
{
	padding: 0;
	margin-top: 0;
	margin-left: 0;
	font: 1em Verdana, Arial, Sans-Serif;
	color: #956839;
	width: 130px;
	float: left;
}

#sidebar h2
{
	display: block;
	background: #fffebf url("/images/tools/bg_paper_top.jpg");
	border: 1px solid #956839;
	-moz-border-radius: 5px;
	padding: 3px 2px 3px 3px;
	margin: 0px 0px 6px 0px;
	color: #956839;
	font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
	font-size: 1.0em;
	text-transform: uppercase;
	font-weight: lighter;
}

#sidebar form
{
	margin: 0;
	margin-left: 0;
}

#sidebar2
{
	padding: ;
	margin-top: 0;
	margin-left: 0;
	float: right;
	font: 1em Verdana, Arial, Sans-Serif;
	color: #956839;
	width: 130px;
}

#sidebar2 h2
{
	display: block;
	background: #fffebf url("/images/tools/bg_paper_top.jpg");
	border: 1px solid #956839;
	-moz-border-radius: 5px;
	padding: 3px 2px 3px 3px;
	margin: 0px 0px 6px 0px;
	color: #956839;
	font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
	font-size: 1.0em;
	text-transform: uppercase;
	font-weight: lighter;
}

#sidebar2 form
{
	margin: 0;
	margin-left: 0;
}

#sidebars
{
	float: right;
	margin: 0px 6px 0px 0px;
	margin-top: 10px;
	width: 274px;
}
#left_columns
{
	float: left;
	width: 280px;
	padding: 0;
	margin-left: 28px;
}

what can i do, iam not a prof in css, this are some pieces from an template (mx4-3columns by frittle)

thanks V.

---

good magic is better than sex, but harder to find …
http://www.lazarro.de

#2 2006-06-27 21:01:59

Walker

Plugin Author

From: Boston, MA

Registered: 2004-02-24

Posts: 592

Website

Re: window in safari ok but trouble with IE ...

You haven’t provided your complete CSS, luckily you provided the example page.

I can tell you you’re running into two issues – box model (interpretation of margin and padding). You need to later the widths slightly for IE.

Also try getting rid of things like:

<code>
padding: ;
</code>

Who knows what IE’s thinking.

---

Me, Myself, and I

#3 2006-06-28 01:37:21

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: window in safari ok but trouble with IE ...

Might try avoiding browser specific tags too (-moz-border-radius: 5px;)

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#4 2006-06-29 19:17:22

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 5,126

Website GitHub

Re: window in safari ok but trouble with IE ...

yep, walker’s right, it’s adding together the margins differently. I found dropping .narrowcolumn down by 1 px to width:399px is enough for it to wrap correctly. Either live with 399px for your normal layout or use a hack, or better use conditional style sheets for Internet Explorer to serve IE a different width.

You might also try putting .narrowcolumn and #sidebar2 into a wrapper div and setting display:inline; for the wrapping div. If it works with the rest of the layout, I can often avoid hacks altogether that way.

---

TXP Builders – finely-crafted code, design and txp