Hello, thanks for viewing. 100% valid code.
Screen Shot of IE
Screen Shot of normal Browser in the case safari
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
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/
This is a hasLayout
This is a hasLayout problem.
Add height:1%; in #content
Thanks Dana, that made the
Thanks Dana, that made the text reappear! . . . but still have different alignment issues? any clue?
Well, I would guess it is
Well, I would guess it is the margin-top of 40px on the breadcrumb
hmm. . . . Nothing to do
hmm. . . . Nothing to do with the breadcrumbs . . . removed the bread crumb div completely and still have the same problem.
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.
Solved
Solved! Thanks for putting up with my CSS adolescence wolfcry, you are a true master. . .