Css problem - rules apparently ignored.
I am currently setting up a new website for a client using Drupal for the first time. So far I have installed the software and done some configuration which was all fairly straightforward. I have designed a template outside of Drupal which works correctly in all browsers tested (Opera, Firefox, IE6). I then converted this to a Drupal template by inserting the php code for the various sections of content.
This did work but did not display as expected and I worked out that the css rules for the main were apparently not being applied. The pagewidth div has a fixed width of 760px, left and right margins set to auto to centre it in the viewport and a background colour. Inside this is a 'container' div which then contains the 2 column core content of the site. A 'footer' sits below the 'container' but still inside the 'pagewidth'.
However, the 'pagewidth' rules were not applied and that div expanded to the full viewport size. The 'container' div, however, was set to 760px wide and centred. The 'footer' was positioned to the left of the 'container' instead of directly below it. The solution I found was to move the 'footer' inside the'container' and the display appeared correctly although there is still no background colour outside the'container'.
I hope this makes sense, the page can be viewed at www.huntlybusiness.com/drupal-4.7.6/. My question is - why are the rules for the 'pagewidth' apparently ignored but set for its child element 'container'? Any insight into this behaviour would be useful for future reference.
Thanks in advance for any help.
Regards
Mike Davies
This issue might been
This issue might been evolved by class/ID interference (cascading) with other Drupal/module css which is attached to html output automatically by Drupal.
Drupal Top Sites | Drupal Sites Directory
Yes, but where?
I think this is probably right but not sure which css file is being accessed. The style tag inserted by Drupal into the 'head' is calling /misc/drupal.css in addition to my site specific css file but I can't see anything in that file referring to #pagewidth or which might be affecting the application of the new rules. It is probably a question of inheritance, but from what and can it be over-ridden? Obviously I have solved the immediate difficulty on this occasion but it would be good to know where the inheritance stems from in case a similar situation arises elsewhere.
Regards,
Mike
Hard to say exactly without
Hard to say exactly without digging your exact setup... which may take hours. But I would note that none of Drupal IDs called #pagewidth.
Some simple workaround may be to use clear divs like
<div class="clear"></div>.clear {clear: both;
display: block;
}
after some/any major layout elements.
Drupal Top Sites | Drupal Sites Directory
_
_