CSS Issue? *UpDated*

  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

This is for my Ozzu design, I have managed to iron out alot of the bugs the design had, but I am stuck on one thing. I doesn't seem that IE6 is rendering my padding right in one part.

This is the code

Quote:
div#forumIcons li
{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
display:inline;
padding-left:0px;
padding-right:55px;
}

div#forumIcons
{
position:relative;
background-image: url('iconsbg.gif');
background-repeat:no-repeat;
height:40px;
padding-top:12px;
margin-left:2px;
padding-right:5px;
padding-left:1px;
}

div#forumIcons ul li {
padding-right:20px;
float:left;
}


And these are the results -

IE6 - Image

Opera - Image

FF- Image

Can someone please tell me why IE isn't rendering this and how I fix it.

Cheers!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Should the first selector be "div#forumIcons ul"?

I think in lists, FF and OP add default margining to the left of the LI. You might try zeroing that out. Then you should be able to work out the spacing for all the browsers equally.

Sorry if I'm wrong. Just a quick guess. I'm on my way out the door for the evening. :)
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

That didn't work. I've just about given up on it, Things that I fix for IE, screw things up in FF.. Opera is the only one who makes sense of the CSS properly lol.. Grrr
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

What if you combine your first & last posted rules, & change the display to block ?
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Thats the least of my problems with the design at the moment. But thanks Joe I will try that later on.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

The other problem I am having is this (sorry guys but I really want to enter this design)

IN IE both 6 & 7 the left float, floats over the header, so I have used this code


Code: [ Select ]

div.left {
    position:relative;
    top:286px;
    padding: 10px 10px 5px 255px;
    height:2100px;
}
  1. div.left {
  2.     position:relative;
  3.     top:286px;
  4.     padding: 10px 10px 5px 255px;
  5.     height:2100px;
  6. }


To fix it, which works, BUT In FF, it kills all of my links in the top menu and side menu. It also brings the footer up from the bottom about 286px. I've been playing with values for a few days and nothing seems to fix the problem..

I have also googled about 150 times to find a fix, and can't find anything solid.

Any ideas?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Benat wrote:
Any ideas?

I think the problem might be that you're using the 'top' command with relative positioning, and it only works with absolute positioning.. maybe IE is correcting it somehow, but FF is taking it literally.

Maybe it would work if you changed
Code: [ Select ]
top:286px;
to
Code: [ Select ]
margin-top:286px;
Just an idea and I'm not sure if that would work, but might be worth trying...
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

It doesn't render in IE I have already tried. :(

Anyone?
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

If your page is fixed width and not scalable this should be solvable by CSS, if it is a Scalable page perhaps a java script to distinguish what definitions to use?

I could be way off base, but just a thought.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6807
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Considering this is for a competition here at Ozzu you cannot use javascript. It is strictly a CSS type competition to restyle the look of the forum.

But in response to what you said, whether or not the page is a fixed width or variable width you can use CSS to solve most problems.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Okay ... bad suggestion. I am still learning CSS and didn't know the competition was only CSS, nothing else for design. (I never read the rules ... :oops: before I offered my help.)

I just wanted to help :)

I can't wait until I get good enough to actually have a chance in the design contests :) But gotta learn alot more first.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 45 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.