Author Topic: CSS discussion (Read 2432 times)

Spriggan · « **on:** July 10, 2006, 02:14:40 PM »

Hey Skar here's that code I was talking about that lets you tell IE which style sheet you want to use based off of the browser version. These are called Conditional Comments, more about them here.

<link rel="style sheet" type="text/css" href="styles/unicity.css" />



That goes in your header, the first style sheet brought it works in IE 7, FF and opera so it loads it first then it check to see if the browser is IE6 and if it does it loads the second Style Sheet. Since CSS always uses the most recently loaded rule the second style sheet supersedes the first. If you want to run a IE only (regardless of browser) check you would just use:



That code only works in IE, all other browsers ignore it.

Skar · « **Reply #1 on:** July 10, 2006, 04:48:24 PM »

Cool. Thanks Sprig.

Spriggan · « **Reply #2 on:** July 10, 2006, 06:34:04 PM »

NP. Let me show you another cool trick.

To make sure you page is always centered no matter what brower and screen resolution.

CSS code:

Code: [Select]


body{
text-align:center;
}

#page{
text-align:left;
}

then make #page (or what ever you want to call it) the main div wrapper around your page (ie the first thing after the body tag). Note that this won't work if you have in the wrapper a float or position element.

Spriggan · « **Reply #3 on:** July 10, 2006, 06:43:26 PM »

And one more, this is something that threw me through loops for ever, getting multi-columned pages to always set the columns to the same height without using JS.

CSS:

Code: [Select]


#container {
      width: 100%;
      height:100%;
      overflow:hidden;
}


/*columns*/

#left_column{
      width: 150px;
      float:left;
      left: 0px;
      top: 0px;
            padding-bottom: 32767px;
      margin-bottom: -32767px;


}

#center_column{
      margin-right: 150px;
      margin-left: 150px;
      
padding: 0px 10px 0px 10px;
      
}


#right_column{
      float:right;
      right: 0px;
      top: 0px;
      width:150px;
            padding-bottom: 32767px;
      margin-bottom: -32767px;
}

HTML:

Code: [Select]


<body>
<div id="container">

<div id= "left_column">
Left column content
<!--ends left column-></div>

<div id= "right_column">
Right column content
<!--ends right column-></div>

<div id= "center_column">
center column content
<!--ends center column-></div>

<!--ends container-></div>
</body>

The funky margin numbers and the overflow being set to hidden keep columns all the same size while not showing the extra 3000+px stuff.

The only precaution is to make sure the last column listed in the HTML order (in this case the center one) doesn't have the huge margins or padding.

So these two posts are two things I wish I knew months ago and are some of the more frequently asked questions when it comes to page layout and CSS.

Timewaster's Guide Archive

News:

Author Topic: CSS discussion (Read 2432 times)

Spriggan

CSS discussion

Skar

Re: CSS discussion

Spriggan

Re: CSS discussion

Spriggan

Re: CSS discussion