23 replies [Last post]
slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Ok here's the problem:

I'm working totally in CSS and have two columns to my page. the left column is aligned to the left (dahh...) and is 186px. So the right column has to be positioned 186px from the left of the page.

I've created a container for the right column so all elements inside will automatically be placed 186px from the left of the page and it's working fine in IE but when it comes to firefox I can't get the container to shift 186px from the right.

Here is the CSS i've got at the moment:

/

* ----- Container for the main content area ------- */

#mainCell {
	padding: 0;
	margin: 0;
	border: 1px solid red;
}

html>body #mainCell {			/* Meant to hide from IE but apply to firefox */
	margin-left: 186px;		
	border: 1px solid blue;	
}

#rightCol {
	margin-left: 186px;
	border: 1px solid green;	
}

html>body #rightCol {			/* Meant to hide from IE but apply to firefox */	
	margin: 0 0 0 186;			/* creates indent in gecko browsers */
	border: 1px solid yellow;
}

I've put the coloured borders in so I can see the layout positioning whilst developing it. In IE they show but in firefox they don't show up at all and the right column is on the left side of the page. It seems to be totally ignoring the child selector hack.

Can anyone suggest something so that I can align the right column in firefox?

thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

firefox child selector hack not working

Give us a link so we can see what's happening.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

gary,

unfortunately where I'm working ftp has been blocked and I'm working on my localhost so I can't provide a link but the attached image helps illustrate what I'm talking about.

Basically in IE:

- works fine
- right column 186px from left page edge (next to the left col).

In Firefox:

- header bar and left col work fine
- right column displays partly BEHIND the left col due it taking no notice of the 186px left margin.

I'm using the child selector hack: http://tantek.com/CSS/Examples/boxmodelhack.html to get around the problem so that only firefox (& mostly gecko based browsers) can see this rule which will override the normal CSS rule.

What I have been finding though is that firefox doesn't appear to be seeing the rule at all. Even though I've used the very same hack in several other instances in the same CSS which DO work.

Really hope someone can help cause it's got me stumped and I've spent ages on so far trying to find a solution. It's a pretty necessary requirement on my page.

cheers

slip

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

firefox child selector hack not working

The problem for me is that I don't know why you need different rules for IE and modern browsers. How are the columns positioned and how is the html written?

<div id="rightcolumn" style="margin-left: 186px">
  <p>some stuff</p>
</div>
<div id="leftcolumn" style="position: absolute; width: 186px;">
 <p>some stuff</p>
</div>
Using an AP element doesn't need separate rules.
<div id="leftcolumn" style="width: 186px; float: left;">
  <p>some stuff</p>
</div>
<div id="rightcolumn" style="margin-left: 186px;">
  <p>some stuff</p>
</div>
Neither do floats.

If you don't have a complete DTD, IE will run in quirks mode with its faulty box model. Are you allowing for the padding and borders being added to the width?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

well like I said the problem isn't with IE (that's spot on). The problem lies with firefox. That is the reason I need seperate rules because obviously if it works for one and not the other then you need one rule for one and another for the other......

So the child selector hack seems an appropriate rule to use because it sets a valid CSS rule in firefox but hides it from IE.

Refering back to the image attachment. that is what I get with IE. With firefox, imagine the right col 186px to the left and UNDERNEATH the left col (on top of each other). So the only problem is that it needs to shift 186px to the right (in firefox ONLY).

here is the html:

<div id="mainCell">

		<div id="rightCol">

                           my html elements go here.................

		</div> <!-- end rightCol div -->
		
</div> <!-- end "mainCell" div  -->

Then the CSS for the divs are:

/* ----- Container for the main content area ------- */

#mainCell {
	padding: 0;
	margin: 0;
	/*border: 1px solid red;*/
}

html>body #mainCell {			/* Meant to hide from IE but apply to firefox */
	margin-left: 386px;
	border: 1px solid blue;	
}

#rightCol {
	margin-left: 186px;
	/*border: 1px solid green;*/
}

html>body #rightCol {			/* Meant to hide from IE but apply to firefox */	
	margin-left: 386px;			/* creates indent in gecko browsers */
	border: 1px solid yellow;
}

I have noted however that the borders I've included aren't displaying in firefox (and neither are any other modifications i make in the rules set aside for firefox) so this tells me that firefox isn't even applying them or recognising them (even though the very same hacks have been applied successfully elsewhere in my stylesheet).

I hope that clears it up and provides you with enough info on the problem to spot a way around it....?

slip

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

firefox child selector hack not working

There really shouldn't be any need for the hack you're using. Firstly, it "works" in IE because IE is broken without using the right doctype. It doesn't work in Firefox because it's incorrect code that Firefox is attempting to render correctly, alas.

Since you have a 1-px border on the left-hand column, the left-margin of the right-hand div should be at least 188px to allow for those vertical borders, otherwise you will have overlap and float problems.

It's hard to help without a working model or the entire document & CSS. Try zeroing out the margins and padding on the <body>. And make sure to add the correct doctype in the beginning of your html document, or else you'll keep having these annoying differences between the two browsers.

Try correcting the CSS, validating your html & adding the right doctype to force IE back into standards mode, then see what happens.

Have you tried the code gary gave you? That should work just fine. Smile

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

Helen,

As far as the body margins, doctype, etc go, yes they are all in place and the rest of it is working fine.

Unfortunately the problem isn't as simple as being 2 pixels out (taking into account the borders). No matter what I set the right col left-margin to be (186, 300, 500, etc) it still stays fixed to the left edge of the page in firefox.

The code that gary provided is pretty much what I've already got with the exception that I'm including it all in the stylesheet rather than the div tag on the html page.

I have found a makeshift solution in that if I set the margin width for every element in the right col to have a left margin of 186px and hide this rule from IE then it works fine in both IE and firefox but that's definately not an efficient way to do it and I'm loathed to take that approach. If the width of the left col ever changes then I'll have to change this width on every element contained within the right col. That's why I made the actual container in the first place.

I really do need a more practical solution though so if you're able to take a look then I can email you the CSS and the html for you to have a look at. Then you can see exactly what it's doing and might be able to spot the problem.

Let me know...

Slip

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

firefox child selector hack not working

Slip,

Since my code works and yours doesn't, why don't you start with mine and add stuff one thing at a time. When it stops working, you might have your culprit.

If something doesn't work in Firefox, you have a coding error. Start with something that works and build from there.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

Gary,

Well to be honest although my description is simple and looks like a basic two columns I have soooo many other things on the page and in the CSS that to change one thing like that would mean changing everything again and it's taken a while to do so far.

This is the first real site that I've done purely in CSS and I've worked through it bit at a time and checked it in both browsers to make sure it aligns correctly. I've tried to make it as efficient as possible in terms of both HTML and CSS but I'm no CSS guru so I'm sure theres plenty of room for improvement. The bottom line is though that apart from that one problem in firefox it all works fine and aligns as it should. The phrase "if it ain't broke, don't fix it" comes to mind.

Like I said I've tried everything I can think of to fix it but can't find a (reasonable) solution so if you want to take a look at both the HTML and CSS then I can send it your way in an email. No doubt you'll probably spot a couple of things that aren't too coshure straight away and I'll learn from the experience but as it stands i've given it my best shot so far.

slip

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

firefox child selector hack not working

My guess is your html and css needs to be as follows

#leftCell {width:186px; float: left;}
#mainCell {margin-left: 186px;}

<body>
<div id="leftCell">some content</div>
<div id="mainCell">some content</div>
</body>

if you are likely to have any elements using clear:left of clear:both within the mainCell you will need to use one of the methods for containing clear to ensure you don't end up clearing the leftCell as well. IE has issues when floats are about so you will need to use the hacks to correct that too. (I thought I had bookmarked the link to all that information, but apparently not).

If you aren't using a footer or some other content that doesn't need to be held below the bottom of both leftCell and mainCell then you can use the following css

#leftCell {position:absolute; left:0; width:186px}

as there are no floats, this should work pretty well with no hacks required - with the exception of something to take care of early IEs incorrect calculation of container widths where margins/borders/padding are involved.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

firefox child selector hack not working

I have looked at this a little closer...

your first css, at the top here, displays fine in firefox complete with borders.
- mainCell is indented 186px from left and then rightCol is indented a further 186px from the left. -- you can see it here.

your second css, from half-way down the thread, displays fine too, only its been shifted further right as you have 386px in the rules child selector hack rules. -- you can see it here

There is an error in the css of your first post, one of your margin values has no units - its just 186. It should be 186px. Given that FF will pick up the value from the general rule anyway, it has no effect on the rendered page.

Finally, this is the page I suggested. And for the life of me I can't work out why there is a gap between the left and right column backgrounds :?

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

Chris,

Thanks for the help.

As far as the stated widths go, yes it is 386px in one of my posts but that's simply because as I'm posting I'm playing around with things to try and get it to work and I was experimenting to see if different widths, borders or anything else made any difference but none of them did - leading me to assume that firefox just isn't seeing that specialised rule at all.....

I notice in your examples that it works so there must be something amiss with other elements of my stylesheet (not too surprising). I've managed to upload the page i'm working on to a temp server and it can be seen here:

http://www.nullvoid.co.uk/temp/test/test00.asp

with the css being test00.css

notice the difference in IE and firefox....

I'm sure there'll be some more efficient ways of doing things in the stylesheet so any comments/suggestions/examples very welcome Smile

thanks

slip

euio
Offline
Enthusiast
Last seen: 16 years 40 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

firefox child selector hack not working

neat design! Laughing out loud ...

im just curious... how do u intend to make sure that when your whole page stretches downwards, youll get to see the footer exactly at the very last scroll of the page?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

firefox child selector hack not working

Firefox seems to be having problems with your comments, see screen image

Thats from FF DOM Inspector tool. It indicates FF is not seeing those two <div>s at all. Similarly if I use WebDeveloper/CSS/View Style information, no screen element shows as being descended from either of those two styles.

I would check and make sure none of your HTML comments include other HTML comment open or close tokens within them.

[edit]
I made a rough copy, deleted the right column and image block comments, replaced them with brand new right column and image block comments and the page seems to work ok now.

You should only need one style

#mainCell {padding: 0;	margin: 0; margin-left:186px;}

meaning you can remove the styles
html>body #mainCell {}
#rightCol {}
html>body #rightCol {}

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

cheers, well the footer is also a slight issue which I'll need to address later on. I'm not exactly sure what you mean but basically as long as the main page content is longer than that of the left column then there won't be an issue. Most of the pages I have lined up satisfy this requirement but for the ones that don't a bit of a hack of adding in an empty div tag in the HTML which is set in the CSS to be, say 300px (or whatever the necessary height is without being too tall).

I know not a clean way of doing things and something which I do attend to address before it goes live.

With the help of some kind CSS entusiasts I hope to iron out the crinkles a bit...... hint hint...... Wink

slip

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

firefox child selector hack not working

shameless bump, my edit explaining how to correct the comment issue didn't get completed before your reply ... just so you don't miss it.

Smile

euio
Offline
Enthusiast
Last seen: 16 years 40 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

firefox child selector hack not working

better! how did u do just that? the footer fits exactly at the bottom no matter what.. Laughing out loud :oops:

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

sorry chris, don't quite catch ya drift....

euio, the footer is basically just specified as being width:100% with the html, body and container of the page stating that it should stretch 100% width and height. Then the other key element to keep it stuck to the bottom is "bottom:0;".

It appears to work fine until you start stretching the browser window. As it gets smaller than the height of the left column you'll see the scroll bar on the right appear and when you scroll down the footer stays where it is.... not ideal but like I said there is that ugly hack to work aournd it. Not good from a CMS point of view though...

Anyway back to the css alignment problems I'm having. Anyone suggest anything yet?

slip

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

firefox child selector hack not working

slippy wrote:
sorry chris, don't quite catch ya drift....

Anyway back to the css alignment problems I'm having. Anyone suggest anything yet?

slip

Delete those two comments. For some unfathomable reason they are causing firefox grief. If you delete those two comments, the div will appear properly in the document flow and then you can simplify the styles as I suggest. e.g. http://wiki.jalakai.co.uk/tester16b.htm

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

firefox child selector hack not working

As Chris has pointed out you have effectively commented out your rules needed for FF a comment is <!-- comment --> not <!------ comment ------>

I have to mention the fact that you are overcomplicating a simple layout with way way too many hacks, why have you used absolute positioning and not floats.

The more hacks I see the more I usually find that the layout could be better constructed I worry when hacks tend to get used to correct basic layout problems, a hell of a lot of hacks are avoidable.

I would also go a bit lighter on the use of comments in the CSS explaining every single hack that you have used, those that are interested will know them, those that aren't wont care for a link to every single hack ever created. your just bloating the file. comment the main sections by all means, that's useful for future reference.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

sun of a gun! it works! You're joking it was the comments...???

	<!-- right column -->
	
	  <div id="rightCol">
	  
	  <!-- image block -->

well I wouldn't have guessed at that. And you sorted the footer problem just by changing it's position to just below that of the main page content!? Unbelievable! Thanks a load dude!

hugo, yeah like I said there are a load of hacks in there but it is my first attempt at doing a site solely in CSS. I basically came up with the design and then worked to achieve it in CSS trying to plug each hole as I came to it rather than plan it as a more experienced CSS user would have done. Any improvements on my design would be appreciated though so I can see the more efficient ways of doing things.

As far as the comments go, they are there purely for my own benefit whilst I'm building it up. I didn't have as many at first but then as I worked on another bit and a previous bit broke I forgot where I got the info from for that particular bit to understand why I did it in that way in the first place. It helps me to learn a bit more as I go along. Obviously I plan to clean it up greatly when everything's honkey dorey.

The only other slight issue I can see at the mo is that when the width of the browser is shrunk to be smaller than the width of the text in the main section the horiz scroller appears and when you scroll right the text is up to the edge but everything else is not. I know this is due to the fact that my text is a set width (700px) and the other elements work on width 100%. I'm just not quite sure how to solve it. Can you suggest anything there?

big up respec'! Wink

slip

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

firefox child selector hack not working

It looks like you got things worked out. Like Hugo, I think the use of browser specific hacks is seldom needed if the page was planned right to begin with. It is normal for newbies at css (and that includes a lot of old hands at html) to overthink the process. As I suggested you do, I simply dumped your page into my demo—minus the hacks and other stuff that seemed flakey. Try it. It doesn't matter which column is the longer, they will appear to be equi-length, both going to the bottom of the doc.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
  <meta name="generator" content=" 
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> 
  <meta name="editor" content="Emacs 21" /> 
  <meta name="author" content="Gary Turner" /> 
  <meta http-equiv="content-type" content=" 
  text/html; charset=us-ascii" /> 
 
  <title>Slippy-csscreator</title> 
 
  <link rel="stylesheet" href="stylesheet.css" type="text/css" /> 
 
</head> 
 
<body> 
  <div id="wrapper" class="clearing"> 
    <div id="banner" class="clearing"> 
      <h1><a href="'#" title="go home"><img src="logo.gif" alt=" 
      logo" /></a></h1> 
 
      <ul> 
        <li><a href="#"><img src="icon_1.gif" alt="home" /></a></li> 
 
        <li><a href="#"><img src="icon_2.gif" alt="contact" /></a></li> 
 
        <li><a href="#"><img src="icon_1.gif" alt="sitemap" /></a></li> 
      </ul> 
 
      <div id="navbar"> 
        <ul> 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/about.asp">About</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/public_info.asp">Public 
          Info</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/online_services.asp">Online 
          Services</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/services.asp">Services</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/retail.asp">Retail</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/links.asp">Links</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/contact.asp">Contact</a></li> 
 
          <li><a href=" 
          http://www.nullvoid.co.uk/temp/test/faq.asp">FAQ</a></li> 
        </ul> 
      </div><!-- end navbar --> 
    </div><!-- end banner --> 
 
    <div id="sidebar"> 
 
      <ul> 
        <li class="blue">Take advantage of our online services</li> 
 
        <li><img src="serviceOption.gif" alt="" /></li> 
 
        <li><img src="serviceOption.gif" alt="" /></li> 
 
        <li><img src="serviceOption.gif" alt="" /></li> 
      </ul> 
 
      <h3 class="headerbar">Quick Links</h3> 
 
      <div style="padding: 6px 0 .7em;"> 
        <select size="1" name="quicklink"> 
          <option selected="selected"> 
            -- Select a link -- 
          </option> 
 
          <option value="about"> 
            About 
          </option> 
 
        </select> <input value="GO" class="submit" type="submit" /> 
      </div><!-- end anonymous --> 
 
      <h3 class="headerbar">Navigation</h3> 
 
      <div id="button"> 
        <ul> 
          <li><a href="#">About</a></li> 
 
          <li><a href="#">Public Info</a></li> 
 
          <li><a href="#">Online Services</a></li> 
        </ul> 
      </div><!-- end button --> 
    </div><!-- end sidebar --> 
 
    <div id="maincontent"> 
 
      <div style=" 
      height: 108px; background: white url(stock_image.gif) top left no-repeat;"> 
      &nbsp; 
      </div> 
 
      <p>Obnoxious news marquee left out</p> 
	<p>&lt;p></p><p>after</p><p>&lt;p></p><p>after</p><p>&lt;p></p><p>after</p><p>&lt;p></p><p>after</p><p class="last">&lt;p></p> 
 
    </div><!-- end maincontent --> 
  </div><!-- end wrapper --> 
 
  <p id="footer">Footer stuff &copy;2005</p><!-- end footer --> 
</body> 
</html>
Note that the html is very straight forward. Now for the css. The positional/structural part is really simple. Most of the rules are for looks, trying to match what you had.
 
html, body { 
    margin: 0; 
    padding: 0; 
    } 
 
body { 
    font: 83% Tahoma, arial, helvetica, sans-serif; 
    color: black; 
    background-color: white; 
    padding: 15px; 
    } 
 
a { 
    text-decoration: none; 
    } 
 
h1, h2, h3 { 
    font-weight: normal; 
    margin: 0; 
    } 
 
img { 
    vertical-align: text-bottom; 
    border: 0 none; 
    } 
 
input[type="submit"] { 
    width: 26px; 
    height: 21px; 
    color: white; 
    background-color: #366496; 
    } 
 
p.last { 
    margin-bottom: 0; 
    } 
 
select { 
    width: 150px; 
    } 
 
p { 
    font-size: 1em; 
    } 
 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 
 
#wrapper { 
    width: 760px; 
    margin: 0 auto; 
    border: 1px solid #888; 
    } 
 
#banner { 
    padding: 1em 0 0; 
    text-align: right; 
    line-height: 52px; 
    } 
 
#banner li { 
    display: inline; 
    padding: .25em; 
    } 
 
#banner a { 
    color: black; 
    } 
 
#banner h1 { 
    width: 155px; 
    float: left; 
    } 
 
#navbar { 
    clear: left; 
    text-align: left; 
    line-height: 22px; 
    background-color: #579; 
    color: white; 
    } 
 
#navbar li { 
    display: inline; 
    text-align: center; 
    padding: 0 10px; 
    border-right: 1px solid white; 
    } 
 
#navbar a { 
    color: white; 
    } 
 
#navbar a:hover { 
    background-color: #89b; 
    } 
 
#sidebar { 
    width: 185px; 
    float: left; 
    border-top: 1px solid #ccc; 
    border-right: 1px solid #888; 
    } 
 
#button { 
    font-weight: bold; 
    line-height: 1.1; 
    color: #003a71; 
    background-color: white; 
    } 
 
#button ul { 
 
    } 
 
#button li { 
    background: url(page_icon.gif) 10px center no-repeat; 
    padding-left: 25px; 
    border-bottom: 1px solid #ddd; 
    } 
 
#button a { 
    color: #003a71; 
    display: block; 
    } 
 
#button a:hover { 
    border-right: 6px solid #a1bad3; 
    background-color: #e4e9ee; 
    } 
 
#maincontent { 
    margin-left: 185px; 
    padding-left: 10px; 
    border-left: 1px solid #888; 
    } 
 
#footer { 
    width: 760px; 
    margin: 0 auto; 
    background: white url(footer_bg.gif) repeat-x; 
    border: 1px solid #888; 
    border-bottom: 0 none; 
    color: black; 
    line-height: 24px; 
    } 
 
.blue { 
    color: white; 
    background-color: #a1bad3; 
    font-weight: bold; 
    } 
 
.headerbar { 
    height: 21px; 
    line-height: 20px; 
    font-size: 1em; 
    color: #666; 
    padding-left: 15px; 
    background: #ececec url(sideheader_bg.gif) no-repeat; 
    } 
 
/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*** end clearing hack ***/
Give it a try. Change the content of the right column so that it's shorter than the left.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

slippy
Offline
Enthusiast
Last seen: 9 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

firefox child selector hack not working

I'll have you know that my news marquee is not obnoxious! Wink

thanks for the pointers gary. I gave the code that you posted a try but the results seem a bit squewiff. It seems to be a centred page layout?

I think after going through the process of creating the page from scratch and getting it to look pretty much like the desired result and cross browser compatible the next thing to do is to probably re-evaluate the design to clean up the code of both the HTML and CSS. I think I'll change the footer of the page to be positioned at the bottom of the content in general rather than the bottom of the page.

Now that i've built up a few skills with CSS layouts if I work on the planning efficient coding then I'll be a guru in no time Smile

As I work though and get stuck on bits I'll probably start a few new posts off and test the knowledge of the css community once again.

cheers

slip

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

firefox child selector hack not working

Quote:
thanks for the pointers gary. I gave the code that you posted a try but the results seem a bit squewiff. It seems to be a centred page layout?
You'll have to define 'squewiff', but it's probably not Wink

I reduced the container/wrapper width to fit an 800px width viewport. The centering is a bell or whistle, depending on your point of view. It's not necessary, but it breaks up the empty space for folks with a wider window.

Just for fun I used css that obsolete browsers don't grok. See input[type="submit"]. You can dumb it down for IE.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.