Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Little help needed for IE6  (Read 4457 times)

kreatur

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 73
    • RoManga
Little help needed for IE6
« on: October 30, 2009, 08:01:31 AM »

As you can see here, i have some text written vertically on the left side, that's the name of my scanlation group, because i didn't want the title to cover the banner. Only way i managed to do this was if i put everything inside another wider div that practically took the place of #wrap, then i put an image with the text as background and floated it to the left. This works just fine in Firefox, Opera, Safari and Chrome, untill i look at it with IE6 (i don't really have any other versions of IE) where everything goes to pieces. The new div seems to lose the fixed height, is filled with white, and i think the pic is gone too.

Now, i'd either like to solve this somehow, or find an easier solution that does the same thing. I tried with absolutely position divs at first, but they don't seem to show outside of the wrap div, and i'm just a newb. I can paste you the CSS if needed.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Little help needed for IE6
« Reply #1 on: October 30, 2009, 10:08:34 AM »

Hi kreatur,

Well, the first thing you can do is to remove this rule:
Quote from: style.css
#apLeft text {
   float:left;
}

(There is no html element called "text", so that style rule does nothing. It just takes up space in the stylesheet.)

What I would typically do in a situation like this is, assuming we keep your #apLeft div, is to add as much space as the left background image needs to be visible. The space is created either by setting a padding value on the #apLeft div, or a margin value on the #wrap div. Since we don't want to mess with the centering of the #wrap div, giving #apLeft some padding is the easier way to go.

So, instead of floating the #wrap div to the right inside #apLeft, what I would do is this:

Quote from: style.css
#apLeft {
   width:930px;
   height:235px auto;
   padding: 0px;
   padding-left:32px; /*The amount of space the nametag image needs to be visible*/
   margin-right: auto;
   margin-left: auto;
   position: relative;
   text-align: center;
   background-image: url(/images/romanga.gif);
   background-repeat:no-repeat;
   margin-top:5px;
}

/*Remove this */
#apLeft text {
   float:left;
}


#wrap {
   width: 894px;
   text-align:left;
   background-color: #ffffff;
   border-left: 2px solid #000000;
   border-right: 2px solid #000000;
   float: right; /*Remove this */
}

A simpler way of doing the whole construction is to add the nametag to your header image, give the wrap a width of 930px with a 32px left padding. That will give the same overall visual and should eliminate any headaches with the extra wrapper. IE6 may be the mother of all CSS f***-ups, but it should work even in that browser.
See if that helps a little.
Logged

kreatur

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 73
    • RoManga
Re: Little help needed for IE6
« Reply #2 on: October 30, 2009, 11:36:29 AM »

Yes, that made things clearer. About the apLeft text, i figured i needed that to float the image.
Done the changes, it works the same as before and apparently it wasn't because of that div that i get a white line on the right side... i changed it's color to make sure, and it's something about #wrap that's wrong. The white ~40px column i get to the right side is still there and it's white because that's the background color of the div. I've looked all over the place but i don't know why i can't remove it.

« Last Edit: October 30, 2009, 11:38:10 AM by kreatur »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Little help needed for IE6
« Reply #3 on: October 30, 2009, 01:35:57 PM »

Yeah, well, you know. IE6 isn't the sharpest tool in the shed when it comes to css layout and if it isn't your primary target browser I'd say ignore it, but then there are lots of people that still use it so...

Anyway, not sure if it'll help much, but one thing you could try is to remove the 32px padding on #apLeft and instead change text-align from center to right. That would force the #wrap container to slam up against the right edge of #apLeft and if the white background color is set on #wrap, and not on #apLeft, then it should work. But ... I don't know, I've ignored IE6 for many years now so maybe it's better to get advice from others that actually care about that browser... ;)

You can use a few services to check your site in a variety of browsers, both Windows and Mac versions, for example: http://www.totalvalidator.com/validator/ValidatorForm (make sure you select a browser version to get screengrab from) or http://litmusapp.com (there are more services around). While they produce screen shots which isn't the same thing as using a real browser it should at least give you an accurate view of the layout. Litmus for example gives you both an in-window and a full-page view, for comparison.
Logged

kreatur

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 73
    • RoManga
Re: Little help needed for IE6
« Reply #4 on: October 30, 2009, 03:26:17 PM »

I know IE6 sucks. If i'd have a site about programing, internet security and stuff like that, most of my visitors would be from better browsers. But if you sell, let's say cookies, housewives don't even know what a browser is.
I remember a funny thing from a couple of months ago, some reporter went out on the street and asked random people what browser they use. I don't know if you can guess the answer, but 90% of them said Google.

Well... thanks for your attention anyway, i'll look into it more thoroughly when i have the time.
Logged

poppoll

  • Full Member
  • ***
  • Karma: 47
  • Posts: 199
    • Poppoll's sNews playground
Re: Little help needed for IE6
« Reply #5 on: October 30, 2009, 05:49:45 PM »

The margin/padding right is caused by the #nav div.
lower the width of #nav in dropmenu.css
width 920px change to 320px
and remove margin:0 auto

PP
« Last Edit: October 30, 2009, 05:56:40 PM by poppoll »
Logged

kreatur

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 73
    • RoManga
Re: Little help needed for IE6
« Reply #6 on: October 30, 2009, 07:41:39 PM »

Right, figures it was in dropmenu.css...
Tx a lot. My mistake for not checking the page with firebug.
Logged