6 replies [Last post]
burton
Offline
Regular
NC
Last seen: 15 years 12 weeks ago
NC
Joined: 2007-02-13
Posts: 11
Points: 0

Hello, thanks for viewing. 100% valid code.

Screen Shot of IE

Screen Shot of normal Browser in the case safari Smile

CSS Source Code

* {
padding: 0px;
margin: 0px;
font-family: serif;
}

body {
background-color: white;
background-image: url(images/1pxbg.jpg);
background-repeat: repeat-x;
text-align: center;
}

#wrapper {
position: relative;
width: 800px;
text-align: left;
margin-top: 21px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
border: 1px solid #cccccc;
min-height: 600px;
}

#header {
width: inherit;
height: 108px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
overflow: hidden;
}

#breadcrumb {
font-size: 11px;
margin-bottom: 20px;
margin-top: 40px;
}

#content {
position: relative;
font-size: 12px;
margin: 35px 234px 45px 170px;
}

#topmenu-wrap {
width: 737px;
background-color: white;
height: 25px;
float: left;
}

#topmenu-img {
width: 139px;
background-color: white;
background-image: url(images/1pxmenuhd.jpg);
background-repeat: repeat-x;
height: 101px;
float: left;
}
#topmenu {
height: 101px;
background-image: url(images/1pxmenuitem.jpg);
background-repeat: repeat-x;
float: left;
}
#topmenu table {
width: 595px;
height: 25px;
text-align: center;
float: left;
}
#topmenu * td {
line-height: 21px;
border-right: 3px solid #FFFFFF;
}
#topmenu * {
color: #FFFFFF;
text-transform: uppercase;
font-size: 11px;
}
#topmenu * a {
text-decoration: none;
}
#topmenu * a:hover {
text-decoration: underline;
}
#topmenu-lastitem {
border: 0px !important;
}
#topmenu-space {
border: 0px !important;
background-color: white;
}

#leftcolumn {
position: absolute;
top: 215px;
left: 0px;
width: 129px;
border-right: 1px dashed;
margin: 0px 0px 0px 10px;
}

.btmbrdr {
border-bottom: 1px dashed;
width: 128px;
}

#rightcolumn {
position: absolute;
background-image: url(images/pita.jpg);
background-repeat: no-repeat;
top: 115px;
right: 46px;
height: 354px;
width: 150px;
margin: 20px;
margin-left: 0px;
}

#footer {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 11px;
}

#breaker {
clear: both;
}

p {
margin-bottom: 10px;
color: #555555;
line-height: 18px;
}
a {
color: #8698AA;
}
a:hover {
color: #8698AA;
}

h1 {
font-family: serif;
color: #8698AA;
font-size: 18px;
margin-bottom: 10px;
}
h2 {
font-family: serif;
color: #8698AA;
font-size: 14px;
margin-top: 10px;
margin-bottom: 5px;
}

h3 {
font-family: serif;
color: #8698AA;
font-size: 12px;
margin-top: 12px;
margin-bottom: 5px;
}

/* Additional styles for #leftcolumn */
#leftcolumn {
color: #8698AA;
font-size: 11px;
line-height: 16px;
}
#leftcolumn p {
text-transform: none;
font-weight: bold;
}
#leftcolumn * {
list-style-type: none;
}
#leftcolumn ul {
margin-bottom: 15px;
margin-left: 5px;
text-transform: none;
}
#leftcolumn * a {
color: #777777;
text-decoration: none;
font-weight: bold;
}
#leftcolumn * a:hover {
text-decoration: underline;
font-weight: bold;

}

/* Additional styles for #content */
#content ol li {margin-left:25px;padding-left:0px; color: #555555;}
#content ol {margin-bottom: 10px;}
#content ul li {list-style:disc;margin-left:25px;padding-left:0px; color: #555555;}
#content ul {margin-bottom: 10px;}
#content blockquote {margin-left:25px;padding-left:0px;}
.entry blockquote {margin-left:45px;padding-left:0px;}

/* Miscellaneous */
.navmenbottom ul li {
font-weight:bold;
line-height: 18px;
}

.w3button {
text-align: center;
border: none;
}

HTML source code

Students Guide To College - Gonorth.com



About veganism
Becoming vegan
Nutrition Guide
Environment
Animal Life

Vegan Meal Ideas

Subtitle zip it



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec interdum, orci at faucibus lacinia, magna magna eleifend leo, id venenatis quam ipsum non nisi. Nulla risus orci, feugiat mattis, dapibus eget, sollicitudin a, pede. Nam vehicula. Donec semper, nisi sed pharetra ultrices, ante magna ultricies odio, vitae feugiat mi velit in enim. Ut blandit erat at mauris. Praesent luctus, metus ac posuere fermentum, nulla sem tristique tortor, ut mattis lorem diam sed nibh. Morbi lectus. Fusce vehicula pede quis nulla. Aenean enim. Integer faucibus egestas augue. Proin placerat massa consequat pede. Suspendisse nibh eros, ornare ut, placerat at, elementum in, magna. Aliquam erat volutpat. Nullam felis orci, placerat et, gravida vel, fringilla at, felis. Sed nonummy bibendum elit. Nullam sed nulla in metus tempus blandit. Nunc est urna, fringilla nec, nonummy quis, mattis vel, quam. Praesent sit amet orci ultrices quam vehicula porta. Curabitur a nunc. Integer semper, dolor at suscipit congue, leo neque consectetuer lacus, sed vestibulum ipsum nibh nonummy enim.
Subtitle


Subtitle zip it



Donec egestas, urna sit amet porta commodo, nisi eros scelerisque odio, non feugiat libero turpis ac purus. Fusce gravida lacus a leo. Nulla scelerisque ante in risus fermentum pharetra. Quisque eros est, molestie in, adipiscing pulvinar, aliquet non, arcu. Praesent purus nunc, ullamcorper non, viverra non, fermentum et, diam. Phasellus ac quam non est tincidunt dictum. Aenean vitae augue eget ligula dapibus tincidunt. Mauris auctor neque. Proin at odio. Etiam lacus. Donec hendrerit, ligula ut convallis bibendum, nisl urna pretium massa, non viverra urna nisl in magna.


Subtitle zip it



Donec et sapien sed nisi fermentum cursus. Donec mollis libero a ante. Cras bibendum. Aliquam ligula. Suspendisse potenti. Praesent porta dapibus leo. Fusce ornare, felis quis mollis eleifend, sem quam iaculis risus, et pharetra augue orci in nunc. In tincidunt dictum tellus. Suspendisse potenti. Sed quis turpis. Aenean sed arcu a tellus lobortis lobortis. Nulla vestibulum convallis ante. Donec a ipsum at nulla nonummy bibendum. Maecenas nunc nisi, elementum in, rutrum sed, semper ut, diam. Curabitur tempor risus et neque. Suspendisse potenti. Integer malesuada metus adipiscing erat. Quisque molestie. Phasellus ac velit a tellus rutrum ullamcorper.


©2007 vibinvegan.com. All Rights Reserved.

Live URL:
http://www.vibinvegans.com/

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

This is a hasLayout

This is a hasLayout problem.
Add height:1%; in #content

burton
Offline
Regular
NC
Last seen: 15 years 12 weeks ago
NC
Joined: 2007-02-13
Posts: 11
Points: 0

Thanks Dana, that made the

Thanks Dana, that made the text reappear! . . . but still have different alignment issues? any clue?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, I would guess it is

Well, I would guess it is the margin-top of 40px on the breadcrumb

burton
Offline
Regular
NC
Last seen: 15 years 12 weeks ago
NC
Joined: 2007-02-13
Posts: 11
Points: 0

hmm. . . . Nothing to do

hmm. . . . Nothing to do with the breadcrumbs . . . removed the bread crumb div completely and still have the same problem.

http://www.vibinvegans.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the problem is that IE

the problem is that IE incorrectly expands elements to contain floating children. So, even though you've set topmenu-wrap to 25px in height, IE expands it to 101px (to contain the floats). One solution would be to have Safari (or Firefox) contain the floats, or set the topmenu-wrap to 101px height, so that IE and standards compliant browsers are similar. Then use the relative positioning of content to pull it up where you want by adding top: -70px to #content (you'll need to remove the top margin as well because IE messes that up too).

to fix the right column simply change the right: 46px to left: 584px;

One comment: with this design, you must guarantee that the center column will be longer than the other two because of the absolute positioning.

burton
Offline
Regular
NC
Last seen: 15 years 12 weeks ago
NC
Joined: 2007-02-13
Posts: 11
Points: 0

Solved

Solved! Thanks for putting up with my CSS adolescence wolfcry, you are a true master. . .