homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Hard Luck with CSS in all browsers.
tc3driver




msg:1191634
 6:59 am on Jan 26, 2006 (gmt 0)

Sorry I am a reletave n00b when it comes to css, I prefer the old school frames way of doing things...

but I decided to come into the 21st century, and am having more issues than I care to admit...

in IE, the single floating menu ends up all the way on the left, everything else is mostly centered (going for centered and aligned with everything else), Opera and FF the float is on top of the content and footer div's, but the text lies to the outside of the float, and everything is aligned to the left.

I am going for a page that works well in 1024x768.

and here is relevant code to be of as much help as possible

the CSS:

div#global {
text-align:left; /* reset text alignment */
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}

div.menu {
width: 120px;
position: justify;
float: left;
margin-left: 0 auto;
margin-right; 0 auto;
border: 1px solid #c0c0c0;
background: #78C0DB;
}

div.contentbox {
border: 1px solid #c0c0c0;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 0px;
width: 772px;
padding: 10px;
background: #78C0DB;
text-align: left;
}

div.content {
border: 1px solid #c0c0c0;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 5px;
width: 772px;
padding: 10px;
background: #78C0DB;
text-align: left;
}

and the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<html>
<head>
<title>Lorem Ipsum Dolor Sit</title>
</head>
<body>
<div id="global">
<!-- Site Logo -->
<div class="head">
<img src="img.png" alt="lorem" title="lorem" width="924" height="186"/>
</div>
<div id="menu" class="menu">
<a class="home" href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
</div>
<div class="content">
<table>
...
</table>
</div>
<div class="content">
<table>
...
</table>
</div>
<div class="footer">
<p class="small">Lorem Ipsum</p>
</div>
</div>
</body>
</html>

any help would be greatly appreciated.

[edited by: createErrorMsg at 5:02 pm (utc) on Jan. 27, 2006]
[edit reason] Code clean up. [/edit]

 

createErrorMsg




msg:1191635
 5:13 pm on Jan 27, 2006 (gmt 0)

tc3driver, sorry this one slipped through the cracks.

I see a few things that would result in the problem you describe.

First off, the global div is tagged in the source code with a CLASS name, but has a hash mark (#) in the selector. the hash mark matches to the ID attribute, not the CLASS name. Change the global div to this...

<div id="global">

...and you're part way there. This will allow the styles assigned to the global div to apply to that element, the most important of which to the problem you describe is the width and centering information.

Note, however, that when you do this, the contentbox will, in all likelihood, bump down below the menu. This is because the width calculations in your code are off.

With #global as the parent container, and set at 748px wide, you are limited to making the combined width of the floated menu and the unfloated contentbox no more than 748px wide. As it is now, the combined with of those two elements is...916px.

120px + 2px + 772px + 2px + 20px = 916px

which is...

menu width + menu border + contentbox width + contentbox border + contentbox padding = total box width

This calculation applies to all modern, compliant browsers (b/c you have a valid doctype).

Change those numbers around so that the total width equals no more than globals 778px and things should be more how you want them.

cEM

tc3driver




msg:1191636
 8:40 pm on Jan 27, 2006 (gmt 0)

That was a typo on my part...
the width was suposed to be 924

(the image width)

tc3driver




msg:1191637
 8:47 pm on Jan 27, 2006 (gmt 0)

No edit button...

so sorry for the double post...

and thanks for the help...

now works as it should :D

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved