[Mac Guru]

I'm having a little issue with Internet Explorer and CSS.

I'm including some pics of my redesign for my site and I'll point out the issues I'm having.



This is how it SHOULD look...



Ok, the two issues I'm having are that the right border on the main content is ramming into the navigation and that the right bar of extra content is out of control!

Any clues as to how I can fix this?

Thanks!
Mac Guru

[Sage]

Well, um... could you provide the style sheet code so that we can see what's happening?

[Mac Guru]

my bad, sorry

Code:
body {
	background : #FFFFFF;
	font: 12px Arial;
	color: #000000;
	margin-right: 45px;
	margin-left: 45px;
	margin-bottom: 15px;
}

a:link {
	color : #000066;
	text-decoration : none;
}

a:hover {
	color : #B42B2B;
	text-decoration : underline;
	text-shadow: 0 0 2px #F00;
}

a:active {
	color : #FFF;
	text-decoration : underline;
	text-shadow: 0 0 2px #FFF;
}

a:visted {
	color : #000;
	text-decoration: underline;
}

.menu a {
	color : #000066;
	text-align: center;
	text-decoration: none; 
	text-shadow: 0px 1px 2px #CCC;
	padding: 3px 10px 3px 10px;
}

.menu a:hover {
	color : #B42B2B;
	text-shadow: 0 0 2px #F00;
	background-color: #ccc;
	text-decoration: none;
}

.menu a:active {
	color : #FFF;
	text-decoration : underline;
	text-shadow: 0 0 2px #FFF;
	background-color: #ccc}

.header {
	background-image: url(img/header_bg.jpg);
	height: 56px;
	background-color: #B42B2B;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	margin-bottom: 3px;
}

.menu {
	width: 100%;
	border: 1px solid #ccc;
}

#rightcontent {
	position: absolute;
	right:45px;
	width:175px;
	border-bottom: 1px solid #aaa;
	border-right: =;
	  padding-right: 3px;
	  top: 90px;
	  padding-bottom: 3px;
}

#content {
	width: 70%;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #aaa;
	  padding-right: 5px;
	  padding-bottom: 5px;
}

h1 {
	background-color: #CC6666;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 0px 1px 1px #000;
	padding: 2px 2px 2px 8px;
	  border: 1px solid #993333;
}

h2 {
	background-color: #CC6666;
	color: #FFFFFF;
	text-shadow: 0px 1px 1px #000;
	text-align: center;
	font-size: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	  border: 1px solid #993333;
}

[philzilla]

try this

[derbs]

or drop the css and use TABLES!

[philzilla]

Originally posted by derbs:
or drop the css and use TABLES!

BLASPHEMY! i'm gonna tell Zeldman on you!

i'm coding with tables right now, actually

[derbs]

Originally posted by philzilla:
i'm coding with tables right now, actually

hahaha! I remember doing this job at work, quite a big website, about 9 months ago.

I decided to do the layout with CSS. Anyway to cut a long story short, after numerous code hacks and browser testing, i scrapped it and rebuilt it with tables, cos it looked shite Lost about 2 weeks work...

[philzilla]

Originally posted by derbs:
hahaha! I remember doing this job at work, quite a big website, about 9 months ago.

I decided to do the layout with CSS. Anyway to cut a long story short, after numerous code hacks and browser testing, i scrapped it and rebuilt it with tables, cos it looked shite Lost about 2 weeks work...

I regularly used to have to code 90k+ HTML pages in Notepad, full of nested tables. When I was in a restaurant one night after work, I was told,
�I�m afraid there�s a problem with your table, Sir�
�Check both the tr & td tags are closed properly,� I said, without even thinking.
The look of confusion on the guy�s face was classic, until I realised and explained.

my excuse today is... i'm using them for tabular data! *shock*

[dillerX]

CSS is God.

No more tables for this guy.

Well, for the most part. The transition was painful, but thanks to Philzman, on track.

[Simon Mundy]

Originally posted by dillerX:
CSS is God.

No more tables for this guy.

Well, for the most part. The transition was painful, but thanks to Philzman, on track.

There's still one thing CSS can't do properly - maximum widths (as opposed to fixed widths) on block level elements. This is one reason that I'm forced to still use tables for layout, dammit

[Mac Guru]

ok so I'm still having issues with it, after numerous attempts with the suggested box model hack, I couldn't figure it out and I'm back to square one... any ideas?

Mac Guru

[Simon Mundy]

Originally posted by Mac Guru:
ok so I'm still having issues with it, after numerous attempts with the suggested box model hack, I couldn't figure it out and I'm back to square one... any ideas?

Mac Guru

Where's the link to your page?

I've just finished a god-awful job with someone else's design, but it did teach me some tip-top tricks with CSS and IE for [hack, cough] PC (rinses mouth out).

CSS is way cool and tables are (mostly) dead

[Mac Guru]

My bad

beta.jamesmeister.com

Mac Guru

[Mac Guru]

Nevermind, synotic and I worked on it today and all's well in the IE camp.

Thanks for the help guys!

Mac Guru

[Synotic]

Originally posted by Simon Mundy:
There's still one thing CSS can't do properly - maximum widths (as opposed to fixed widths) on block level elements. This is one reason that I'm forced to still use tables for layout, dammit

What do you mean by this? Aren't block elements max width by default? What kind of layout are you trying to achieve exactly?

[Simon Mundy]

Originally posted by Synotic:
What do you mean by this? Aren't block elements max width by default? What kind of layout are you trying to achieve exactly?

The CSS 2 spec for 'max-width' could mean that I could have a flexible-width layout, but have the length fixed at a certain width once it reached that value. For example, I could have a layout that fit inside an 800x600 browser, that expanded to fit inside a 1024 x 768, but fixed its width and then centred itself within the page if the page went wider.

Sounds cool and straightforward, but only Mozilla supports this method.

[Synotic]

Originally posted by Simon Mundy:
The CSS 2 spec for 'max-width' could mean that I could have a flexible-width layout, but have the length fixed at a certain width once it reached that value. For example, I could have a layout that fit inside an 800x600 browser, that expanded to fit inside a 1024 x 768, but fixed its width and then centred itself within the page if the page went wider.

Sounds cool and straightforward, but only Mozilla supports this method.

I'm familiar with it, but in that instance wouldn't it just be a luxury? I don't see how table layouts can accomplish a CSS property that isn't fully supported (although Safari supports it as well). I'm just confused, that's all

[Simon Mundy]

Originally posted by Synotic:
I'm familiar with it, but in that instance wouldn't it just be a luxury? I don't see how table layouts can accomplish a CSS property that isn't fully supported (although Safari supports it as well). I'm just confused, that's all

OK... try this at home (with safety goggles on):-

(I'll ditch attributes and < > tags for brevity)

table width=100%

col
col width="800"
col

tr valign=top

td nbsp; /td
td bgcolor=red img src=whatever.gif width=600 /td
td nbsp /td

/tr

/table

Now what you'll notice is a cell (which effectively could hold your page layout) that shrinks down to 600 minimum in a smaller browser window, but expands no more than 800 pixels in a larger window.

Nice, huh? I discovered it by using the 'col' tags rather than explicity setting the widths of the td tags

Now if only this could be achieved with CSS 2 consistently....

[redJag]

Yes, the max-width property is so sexy. Even better, though, is min-width. Hopefully with SP2, IE for Windows will have better CSS support, including these two properties (ok yeah, who am I kidding..)