SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Nov 9, 2003, 20:11 #1
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Some goofiness going on with IE 6
Here is the link. am just trying some designs, and this is a 3 column Fluid style. The middle column contains an h2. For some reason, it won't show the background image to go with it, but it works on other browsers.
Then the paragraphs should have white backgrounds with a light grey border, but in the middle, it doesn't show up.
Any help?
Thanks
Bryan
p.s. I can't seem to get that right nav bar to be up with the others.
-
Nov 10, 2003, 06:49 #2
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have fixed a lot of your problems by doing the following
- In the style for div#leftnav, changed margin: 10 0 0 10; to margin: 0px 0px 0px 10px;
- In the style for div#rightnav, changed margin: 10px 20px 0px 0px; to margin: 0px 10px 0px 0px;
- In the style for div#content h2 added position: relative; at the top
- In the style for div#content p added position: relative; at the top
After these changes all that is wrong is that the right nav bar is a little low, I'm still working on that.
-
Nov 10, 2003, 07:07 #3
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK have managed to align the right nav as well now. The problem appears to be that the way you where using padding and margins on the different elements of the page was not standardised in anyway. This made finding the offending margin/padding (and that is all it was) hard to find. I have standardised paddings and margins, the new style code is:
HTML Code:<style type="text/css"> body, html { margin: 0px; padding: 0px; } #container { width: 100%; margin: 0px; color: #333; position: relative; background-color: #F5F5F5; } #top { width: 100%; background-image: url(images/gamecube_02.jpg); background-repeat: repeat; padding: 0px; height: 127px; margin: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; border-top-style: none; border-right-style: none; border-left-style: none; } #top h1 { padding: 0px; margin: 0px; } div#leftnav { float: left; width: 130px; margin: 20px 0px 0px 10px; } div#rightnav { float: right; width: 130px; margin: 20px 10px 0px 0px; } #content { margin-left: 200px; margin-right: 200px; margin-top: 20px; margin-bottom: 10px; } img.floatleft { /*float: left;*/ position: absolute; left:0; top: 0; z-index: 200; } img.floatright { /*float: right;*/ position: absolute; right: 0; top: 0; z-index:100; } dt { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #000000; background-image: url(images/gamecube_06.jpg); background-repeat: repeat-x; padding-left: 5px; border: 1px solid #D8D5E1; padding-top: 5px; padding-bottom: 5px; text-align: center; } #footer { clear: both; margin: 0; padding: 2px; color: #000000; background-color: #E4E4E4; border-top: 1px solid #CCCCCC; border-bottom-width: 1px; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-decoration: none; text-align: center; } dl { background-color: #E6E6E6; width: 128px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #D8D5E1; border-bottom-color: #D8D5E1; border-left-color: #D8D5E1; margin-left: 10px; margin-bottom: 20px; margin-top: 0px; } dd { padding: 1px; margin: 0px; text-align: center; } a.even:link, a.even:visited { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #000000; display: block; width: 100%; text-decoration: underline; background-color: #F3F3F3; } a.odd:link, a.odd:visited { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #000000; display: block; width: 100%; text-decoration: underline; } a.even:hover { color: #FFFFFF; text-decoration: none; background-color: #590288; } a.odd:hover { color: #FFFFFF; text-decoration: none; background-color: #590288; } div#content h2 { position: relative; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #999999; text-decoration: none; background-image: url(images/gamecube_06.jpg); background-repeat: repeat-x; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 10px; border: 1px solid #D8D5E1; margin: 0px; } div#content p { position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; text-decoration: none; background-color: #FFFFFF; letter-spacing: 1px; padding: 5px; margin: 0px; border-right: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; border-left: 1px solid #E0E0E0; border-top-style: none; } </style>
Code:div, p, h1, h2, h3, h4 {border: 1px solid black;}
If you do that to the original code it is easy to see the no-standard padding and margins on the nav left and right divs.
-
Nov 10, 2003, 08:38 #4
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks.
When you said standarized way of margins/padding, what did you mean by that?
-
Nov 10, 2003, 10:24 #5
- Join Date
- Jul 2003
- Location
- Boston
- Posts
- 126
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 10px;
Code:padding: 2px 0 2px 10px;
-Lewis
-
Nov 10, 2003, 10:46 #6
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What Lewis said is not what I meant, although that is the way I would decribe padding, however I always put units on my lengths even if they are 0 (in which case units are, strictly speaking, redundent) in order to avoid what you have done which is to accidentally miss off the units in leftnav margin.
Considering the positions of your left and right nav bars and looking at some of your original CSS
Code:<style type="text/css"> #container { width: 100%; margin: 0px; color: #333; position: relative; background-color: #F5F5F5; } div#leftnav { float: left; width: 130px; margin: 10 0 0 10; } div#rightnav { float: right; width: 130px; margin: 10px 20px 0px 0px; padding: 1em; } dl { background-color: #E6E6E6; width: 128px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #D8D5E1; border-bottom-color: #D8D5E1; border-left-color: #D8D5E1; margin-left: 10px; margin-bottom: 20px; margin-top: 10px; } </style>
ie
same top margin
same bottom margin
same top padding
same bottom padding
left margin of 1 = right margin of other and vis versa
left paffing of 1 = right padding of other and vis versa
For your 2 styles the margins were different and the paddings were too. One of the main things I did to get the positioning right was write the margins and padding in a standard way (in this case all padding 0 and positioned using the margins) and make sure that the values were correct according to the list above, top margins equal and left margin of leftnav = right margin of rightnav.
Additionally a suspect that your dl border could be written as
Code:border-width: 1px; border-color: #D8D5E1; border-style: none solid solid solid;
-
Nov 10, 2003, 12:49 #7
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
*cough* Dreamweaver MX *cough*
That is why I get some of the output I do. I am trying to slowly hand change them, but its so easy to point and click.
-
Nov 10, 2003, 15:47 #8
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
any reason why in Mozilla, Opera, and Firebird the right navigation hugs the right side and doesn't use the 10px of margin there is?
-
Nov 10, 2003, 18:25 #9
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Alright, here is the latest with the changes
http://www.btkdesigns.com/gamecube
It appears good in all the browsers from my standpoint, but haven't seen it in older ones.
Bookmarks