...

View Full Version : IE css layout issues



blskny
11-19-2009, 04:26 PM
I have been scratching my head for days over how to correctly get this site (http://www.pdtest.com/Perrie_Web_New/index.html) to correctly display in IE. It works fine in Chrome, Firefox, Opera, and Safari, but no matter what I seem to do, the content in the right colum is forced down, when viewing in IE

I have basically just started it and this will be the home page and part of the template.

It is built in Dreamweaver CS4 on MAC.

FYI - am a 6 month old DW student

Thanks so much - really appreciate any help here.

Barbara

Excavator
11-19-2009, 04:51 PM
Hello blskny,
One of the very first things you should learn in a DW class is that you should use a DocType. Check out the link about DocTypes in my signature below.
That's going to go a long ways toward making your .html cross browser compatable.

Your layout should work ... I usually float the left column and margin over the right but I don't think there's anything wrong with doing it the other way around. Just in case, here is a bug list for IE (http://www.positioniseverything.net/explorer.html)... helps sometimes to see if your inadvertently causing some known issue.

In IE8 and IE7, your #sidebar1 stays up but your #mainContent drops. Odd that you see your right column drop... are you viewing this in IE6?

ckeyrouz
11-19-2009, 05:01 PM
I have done the following changes to some of your css rules:

1- .twoColFixRtHdr # sidebar1 I removed the padding-top: 30px
2- .twoColFixRtHdr #mainContent I removed the zoom : 1
3- #meetFamily I rmeoved the margin : 10px 5px 10px 10px
4- #advertise_us I removed the margin : 5px 5px 10px 10px

Try them, it worked for me, but I did not test the impacts of Firefox or google chrome.

abduraooft
11-19-2009, 05:05 PM
Hi blskny,
If you are serious, I'd recommend you to learn how to hand code your pages using a simple editor like notepad++. You may use DW's code view, but don't use/trust it's design view, since it's not a browser. It might be easy for you to use DW to get some quick output, but it may screw your document at the end.

Read the following resources...

Why using tables for layout is very bad (http://www.hotdesign.com/seybold/).
Semantic code: What? Why? How? (http://boagworld.com/technology/semantic-code-what-why-how)

blskny
11-19-2009, 05:24 PM
Thank you everyone. Have never been to a Forum before and I am AMAZED at how fast help comes in.

I used the template from DW that is called 2 col fixed, right sidebar, header and footer to build this. it did not have DOC TYPE in the code.

Also tried taking out the margins - I don' think it did the trick. Here is the new link:
file:///Clients/Starmony/Perrie_Web_New2/index2.html

Meet the Family just moved out to the edge.

Am I just doing something incorrectly because I am a novice?

Excavator
11-19-2009, 06:35 PM
new link:
file:///Clients/Starmony/Perrie_Web_New2/index2.html

That's just your local link. Do you have it up on a test server?

Am I just doing something incorrectly because I am a novice?

Haha, not being a novice does not preclude us from doing something incorrectly - I do that all the time!

blskny
11-19-2009, 06:37 PM
Sorry you are right. I am too stressed. I hate not knowing - the learning curve is very frustrating.

Here is the link:

http://www.pdtest.com/Perrie_Web_New2/index2.html

THANKS AGAIN

Excavator
11-19-2009, 06:42 PM
There is still no DocType...

Excavator
11-19-2009, 06:47 PM
I always use an XHTML Strict DocType declaration but the code DW has provided you may work better with this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Perrie Meno-Pudge</title>
<link href="perrie.css" rel="stylesheet" type="text/css"><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--

#apDiv3 {
position:absolute;
width:491px;
height:30px;
z-index:1;
left: 469px;
top: 108px;
}
-->
</style>
</head>

<body class="twoColFixRtHdr">
...the rest of your site

blskny
11-19-2009, 06:55 PM
There are so many different ones. How do I choose the right one.
Thanks.B

blskny
11-19-2009, 06:58 PM
OK i got it - I just put the Doc type at the top of the same file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Here is the link again

http://www.pdtest.com/Perrie_Web_New2/index2.html

Excavator
11-19-2009, 07:03 PM
Right on! That seems to have fixed the problems when I view it in IE8 and IE7.
How does it look for you now?
I don't have IE6 to look at it, don't be surprised if that browser messes it up :rolleyes:

Now have a look at http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.pdtest.com%2fPerrie_Web_New2%2findex2.html
Check out the links about validation in my sig below.

Next site you do, you'll be ready to take abduraooft's advice and hand code it.

blskny
11-19-2009, 07:16 PM
THAT IS UNBELIEVABLE!!! It worked!!! You are wonderful.
OK NOW I must understand why and how it worked. Will review the validator

THANK YOU ALL for your time and help and patience.
Barbara

Excavator
11-19-2009, 07:45 PM
blskny,
I have some menu examples up here (http://nopeople.com/design/CSS%20tips/index.html) if you're interested - it looks like that may be the next thing you tackle.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum