Web Hosting Forum | Lunarpages
News: July 14, 2008 - New Contest! - Submit Your WordPress Theme Designs, Win BIG!
September 1, 2008 - Submit Your Web Site for the Sept 2008 Site of the Month!
 
*
Welcome, Guest. Please login or register.
Did you miss your activation email?
September 06, 2008, 06:33:50 PM


Login with username, password and session length


Pages: [1]   Go Down
  Print  
Author Topic: IE vs MOZ/FF for css "top" positioning  (Read 245 times)
Brennie369
Spaceship Captain
*****
Offline Offline

Posts: 115



WWW
« on: July 05, 2008, 01:48:21 PM »

Hi, is there a standard way to state in my CSS whether the style is for IE or for MOZ?

I'm trying to position a top horizontal menu & giving an absolute top position in px, & it's showing differently in both. I've tried using 2 positions in the following manner:

#top-menu {
   position:absolute;
   top:118px !important; /*IE top*/
   /* for Mozilla */
   -moz-margin-top:-20px !important;;
}

But no success - it's only reading the IE positioning (& I am checking in both IE & moz).

I've tried different variations but nothing is working. It's driving me batty!  Head Bashin
Logged
D47
Newbie
*
Offline Offline

Posts: 4


« Reply #1 on: July 06, 2008, 02:07:03 AM »

For this i use the "<!--[if IE]>" directive, for example:

   <link rel="stylesheet" type="text/css" href="./style.css" media="screen" >
   <!--[if IE]><link rel="stylesheet" type="text/css" href="./IEstyle.css" media="screen" /><![endif]-->

Classes in the IEstyle.css style sheet are declared after the default style and thus override any options previously defined.

so if in style.css you declared:
   height: 100px;
and then in IEstyle.css:
   height: 200px;

You would end up with IE using the height: 200px; and all other browsers using height: 100px;

I am aware of other methods such as javascript and some crazy "/*\*/" css hack. But i prefer this one.
Hope this helps.

edit: also you can find an example at my site in progress, nullam.net
« Last Edit: July 06, 2008, 02:08:59 AM by D47 » Logged
Brennie369
Spaceship Captain
*****
Offline Offline

Posts: 115



WWW
« Reply #2 on: July 06, 2008, 06:47:28 AM »

That's helpful, thanks! One question about this - in my IE stylesheet, do I need to have the full styles or just the IE specific ones, & then it pulls the rest from the other one?

Thanks again!

~Brenda
Logged
scanman20
Master Jedi
*****
Offline Offline

Posts: 1234



WWW
« Reply #3 on: July 06, 2008, 11:23:03 AM »

If you include the conditional IE statement after the CSS you use for all other browsers, then your IE stylesheet need only include the styles you want to add to, or override, in the other style sheet.
Logged

Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP
Brennie369
Spaceship Captain
*****
Offline Offline

Posts: 115



WWW
« Reply #4 on: July 07, 2008, 08:03:52 AM »

Just to let you know, that worked perfectly, thanks again.  Happy Happy Joy Joy
Logged
Rowan
hamburglar
Über Jedi
*****
Offline Offline

Posts: 1918


I used to be Human....2.0b


WWW
« Reply #5 on: July 18, 2008, 12:04:45 AM »

If you only have a few differences you can use the underscore hack:
Code:
.myglobalclass
{
height : 200px !important;
_height : 100px !important; /*for ie only*/
}
Logged

Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.3 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS! Dilber MC Theme by HarzeM