FacebookTwitter
Hatrack River Forum Post New Topic  Post A Reply
my profile login | register | search | faq | forum home

  next oldest topic   next newest topic
» Hatrack River Forum » Active Forums » Books, Films, Food and Culture » CSS Help Anybody?

   
Author Topic: CSS Help Anybody?
Phanto
Member
Member # 5897

 - posted      Profile for Phanto           Edit/Delete Post   Reply With Quote 
So I've been working on this website, part of which is aimed at writing articles on the art of writing. I've developed some nice (for my standards) code, and got it to look really nice. I added this nice wrapper effect so that the page has this fade-in border.

I even felt kinda proud of myself.

Then I saw the website in Internet Explorer. The wrapper effect does not work for it. How can I fix this? Any ideas? If needed, I can email the source.

Posts: 3060 | Registered: Nov 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post   Reply With Quote 
Without more details, it isn't possible to provide specific suggestions. Could you link to it, or copy/paste some relevant source?

Of course, my basic suggestion is to create a minimal page that recreates the problem, and try to fix that (or if the minimal page works, slowly add elements to that until you understand what the problem is [Wink] ).

Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Strider
Member
Member # 1807

 - posted      Profile for Strider   Email Strider         Edit/Delete Post   Reply With Quote 
And I can tell you from personal experience(on fugu's suggestion) that that method works beautifully!
Posts: 8741 | Registered: Apr 2001  |  IP: Logged | Report this post to a Moderator
Phanto
Member
Member # 5897

 - posted      Profile for Phanto           Edit/Delete Post   Reply With Quote 
fugu13, you again? Must you be eternally helpful? ;-).

code:
#wrapper {
float:left;
margin: 0 auto;
background-image: url(border-mid.jpg);
background-repeat: repeat-y;
display: inline;
}

#container {
width: 663px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: white;
font-family: helvetica;
display: inline;
}

#content
{margin-top: 15px; text-align: left; float: left; margin-left: 8px; margin-right: 8px;
display: inline; }

#header {width: 97.7%; background-image: url("header-back1.jpg"); background-repeat:
no-repeat; float: left; margin-left: 8px;}

Argh. I guess a problem is that I'm trying to get this up to meet a deadline and that's making me both more aggressive and less eager to create "good" code. Any thoughts?
Posts: 3060 | Registered: Nov 2003  |  IP: Logged | Report this post to a Moderator
erosomniac
Member
Member # 6834

 - posted      Profile for erosomniac           Edit/Delete Post   Reply With Quote 
What element are you applying wrapper to? IE is really, really picky about how you use float.
Posts: 4313 | Registered: Sep 2004  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post   Reply With Quote 
What does the IE page look like (in terms of contrast to how it should look)?
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Phanto
Member
Member # 5897

 - posted      Profile for Phanto           Edit/Delete Post   Reply With Quote 
erosomniac: I am applying wrapper to the whole page. I do not think I cancel that <div> until the end of the document.

code:
<div id = "border"> 
<img src = "/images/border-top.jpg" />
<div id = "wrapper">
<div id = "container">
<div id = "header"> <br>

fugut13: The IE page does not fit neatly into the "blanket" I made for the objects. The Firefox version is like a column in the middle with a nice border and space on the left, top, and right. The IE is in the middle, but bulges out past the border.
Posts: 3060 | Registered: Nov 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post   Reply With Quote 
Have you zeroed the padding and margins of the body element?

Actually, I'd suggest making Yahoo's Reset CSS (see: http://developer.yahoo.com/yui/reset/ ) your first CSS include, and working from that. Anything you've explicitly overridden will stay overridden, and it provides sensible uniform defaults for all the elements that vary across browsers.

The recently added YUI CSS libraries are really interesting.

My suspicion is that something related to IE's margin bug is happening: http://dorward.me.uk/www/centre/ , possibly being compounded by the floats.

Make sure your page is coded to standards and triggers standards-compliance mode on IE (see here: http://hsivonen.iki.fi/doctype/ and here: http://www.elementary-group-standards.com/web-standards/standard-compliance-has-two-different-meanings.html ). That doesn't take care of all IE, however. Also, how big was the window? Actually, it doesn't really matter. 8/.003 is approximately 2667 pixels, so if the area available to header is less than that (which I assume it almost always will be), the total width it tries to grab is greater than 100%. This can cause problems, particularly on IE.

Try to modify your design to be more fluid, such that it adjusts depending on how much content is being used (and relies on the presence of content to force it out to appropriate widths and the like).

Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Phanto
Member
Member # 5897

 - posted      Profile for Phanto           Edit/Delete Post   Reply With Quote 
Thanks so much fugu13 [Smile] . Great advice as always.
Posts: 3060 | Registered: Nov 2003  |  IP: Logged | Report this post to a Moderator
   

Quick Reply
Message:

HTML is not enabled.
UBB Code™ is enabled.
UBB Code™ Images not permitted.
Instant Graemlins
   


Post New Topic  Post A Reply Close Topic   Feature Topic   Move Topic   Delete Topic next oldest topic   next newest topic
 - Printer-friendly view of this topic
Hop To:


Contact Us | Hatrack River Home Page

Copyright © 2008 Hatrack River Enterprises Inc. All rights reserved.
Reproduction in whole or in part without permission is prohibited.


Powered by Infopop Corporation
UBB.classic™ 6.7.2