/    Sign up×
Community /Pin to ProfileBookmark

So tired of IE (layout)

Copy linkTweet thisAlerts:
Mar 20.2006

So I’m trying to put together this simple website for a friend of mine, and I’m really trying to understand the reasons for IE’s apparent disregard for simple code that works perfectly in Firefox and Safari.

so in IE, the columns containing the image and the text don’t appear to float:left. Nor do they seem to clear the Navbar (which isn’t fully functional, I know). I don’t have a full understanding of CSS or XHTML, so I don’t know what IE understands and doesn’t understand.

[URL=http://www.blwadv.com/charbonneau/golf.htm]here’s the link[/URL]

I also know this doesn’t validate as strict XHTML because I’m missing some Alts, but that wouldn’t cause my problem would it?

I’d really appreciate any feedback ya’ll could give me. I’m just kinda stuck here.

Thanks,

JP

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogMar 20.2006 — I'm not seeing any difference between FF1.5 and IE6.
Copy linkTweet thisAlerts:
@ray326Mar 20.2006 — I see only minor differences, too. Nothing as radical as described. What version of IE?
Copy linkTweet thisAlerts:
@JPDauthorMar 20.2006 — I'm previewing with IE 6.0.2.

I suppose it's not radically different, but if you click on the links, [URL=http://www.blwadv.com/charbonneau/golf.htm]like here[/URL], you'll see that the .col1 & .col2 divs appear to be aligned to the right of the container instead of to the left as they are in the other browsers.

I've edited the link on the original post, in case it was misleading.

thanks for the replies,

JP
Copy linkTweet thisAlerts:
@ray326Mar 20.2006 — Well one thing you could try is dropping the float on col2 and pushing it over with a margin (about 220px or so).
Copy linkTweet thisAlerts:
@JPDauthorMar 20.2006 — good idea, but it won't quite work.

It seems that it's col1 that needs to be shifted left in order for the layout to work in IE. The image in col1 needs to be aligned with the 'about' link in the navbar.

also, when I drop the float on col2, it takes a margin-top of about 250px to get it pushed down at all from the navbar in Firefox and Safari, while the full 250px is applied in IE - placing col2 waaaay too far down the page.

thanks again,

JP
Copy linkTweet thisAlerts:
@CFHuttonMar 20.2006 — nm
Copy linkTweet thisAlerts:
@JPDauthorMar 20.2006 — Anybody?
Copy linkTweet thisAlerts:
@CFHuttonMar 20.2006 — I'm kind of new to css positioning, and have been mostly using position:absolute and position:relative.

However, I messed around a little with your code, trying to avoid using the absolute and relative positioning, and here's what I came up with. It's hard to tell without any images.

I'll just post the sections I changed. You'll probably have some tweaking to do even if it does help.

<i>
</i>
.col1
{
display:inline;
background-color: #FEF4E1;
text-align: left;
float: left;
width: 170px;
height: 300px;
padding:0;
margin: 30px 0px 0px 0px;
}

.col1 img
{
background-color:#FFFFFF;
margin:0 0 0 15px;
padding:0px;
}

.col2
{
display: inline;
padding:0;
margin: 30px 0px 0px 0px;
text-align: left;
background-color: #FEF4E1;
float: right;
height: auto;
width: 480px;
font-family:"Times New Roman", Times, serif;
font-size:13px;
line-height:1.3em;
color:#000000;
}


Let me know what it looks like. I'm not even sure I know exactly what you want.

CFH
Copy linkTweet thisAlerts:
@FangMar 20.2006 — You just need the [I]display:inline;[/I]
Copy linkTweet thisAlerts:
@JPDauthorMar 21.2006 — 'display:inline' it is!

thanks so much,

-JP
×

Success!

Help @JPD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...