Css enhancement

  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

Can anyone give any ideas or advices on my css file:
http://tzr.ro/stila.css
i seem to have trouble on different browsers with my text especialy. How can i better stabilize the css on my layout!?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I found this list today. Its handy when trying to figure out cross browser problems.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

For your text, a good place to start would be using a font that is more common on everybody's computer. Typically for a sans serif font, a good choice is something like verdana or arial. In your case, you should back up your Lucida font like this:
Code: [ Select ]
font-family:"Lucida Sans Unicode", verdana, arial, sans-serif;

That way if the user doesn't have Lucida on their machine, it will default to verdana, then arial, etc.

Another common cross browser issue is line height. I always put this in my CSS somewhere:
Code: [ Select ]
p{line-height:1.6em;}

(substitute for whatever line height you like, of course)

Another common thing is margin and padding that different elements will have different defaults for in different browsers. For that, I always include a line like this in my CSS:
Code: [ Select ]
div,ul,li,h1,h2,h3,p,ol,dl,img,table,td,tr,blockquote,span{margin:0px;padding:0px;}


Hopefully that'll help for a start!
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

jameson5555 wrote:
Code: [ Select ]
div,ul,li,h1,h2,h3,p,ol,dl,img,table,td,tr,blockquote,span{margin:0px;padding:0px;}

can't you jus replace that with:
Code: [ Select ]
*{margin:0px;padding:0px;}
??
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Holy smoke, I think you're right! I just tried it on one of my sites and nothing seemed to change.. that's way easier than what I was doing.

For some reason I thought the universal selector only worked in IE6, since that's what I use the * html fix for.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

it does work everywhere as far as I aware, but remember that that will reset EVERYTHING including drop down menus form elements, etc and so in some cases you'll have to go back and rebuild pieces.

I typically refer to the standard resets like Eric Meyer's CSS Reloaded as a guide on that stuff and none of them reset the margin/padding on things globally.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Reseting everything is just fine with me. At least that way there's no mystery about browser treatment.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

haha I hear that.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

jameson5555 wrote:
Holy smoke, I think you're right! I just tried it on one of my sites and nothing seemed to change.. that's way easier than what I was doing.

For some reason I thought the universal selector only worked in IE6, since that's what I use the * html fix for.

hehe ... cool ... glad I could make your life easier ...
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

I also noted that if i try to make a horizontal list (ul) there is a small space shifting in ie from firefox.. in other words they don't seem to position exactly in the same spot, the text i mean. I allways get a 1px shifting space in a random direction. I have to note that i use float and position relative at my menu list! The fastest way is to make a css separatly for ie and correct the 1px!

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 78 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.