|
CSS - Div Aligned Perfectly In Firefox But Not Ie - Please Help!
Hi everybody, I'm sure there is a very simple solution to this layout problem but I haven't been able to fix it.
My design displays perfectly in Firefox but is out of place by 40px in IE. URL The CSS in question is certainly this div: Code: #sub-content ul li a {
...
margin-left: -40px;
position: relative;
}
I've tried various IE hacks, such as the ones mentioned on Centricle, e.g: Code: div>#sub-content ul li a {
margin-left:0px;
}
But to no avail. Would a CSS guru mind helping me out? Similar TutorialsHi, i'm working on this search box but I can't get the 3 elements perfectly aligned, the bottom of the elements should be aligned. What I have is: Search: <input> <img> Search is <label>, input is a normal input text box, <img> is used instead of submit. The problem is, that the <img> is about 5px higer than the other two. The Search label and input are middle aligned. Does anyone have a solution for this positioning problem? A link with workarounds would be useful. Thanx. I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance. Here is the site: insightchirocare.ca Here is the css code: Code: /* CSS Document */
*{
padding:0;
margin:0;
width: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-repeat:repeat-x;
background-color:#ffffff;
padding:0;
margin:0;
}
#container {
width:800px;
margin:auto;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* HEADER IMAGE */
#header{
background-repeat:no-repeat;
background-image: url(images/header.gif);
height: 150px;
width: 800px;
float:left;
margin:300 px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
/* HEADER BACKGROUND IMAGE END */
/* NAVIGATION */
#nav{
width:800px;
float:right;
height:30px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
.menu ul{
padding:0;
margin:0;
list-style-type:none;
list-style:none;
display:inline;
}
.menu li{
padding-right:0px;
margin:0 0px 0 0;
height:30px;
list-style-type:none;
list-style:none;
display:inline;
float:left;
}
span{
display:none;
}
#home a{
background:url(images/nav_bar/home.gif);
width:74px;
height:30px;
display:block;
}
#home a:hover {
background:url(images/nav_bar/home_gr.gif);
width:74px;
height:30px;
display:block;
}
#home a:active {
background:url(images/nav_bar/home_gr.gif);
width:74px;
height:30px;
display:block;
}
#about_us a{
background:url(images/nav_bar/about_us.gif);
width:82px;
height:30px;
display:block;
}
#about_us a:hover{
background:url(images/nav_bar/about_us_gr.gif);
width:82px;
height:30px;
display:block;
}
#about_us a:active{
background:url(images/nav_bar/about_us_gr.gif);
width:82px;
height:30px;
display:block;
}
#first_visit a{
background:url(images/nav_bar/first_visit.gif);
width:81px;
height:30px;
display:block;
}
#first_visit a:hover{
background:url(images/nav_bar/first_visit_gr.gif);
width:81px;
height:30px;
display:block;
}
#first_visit a:active{
background:url(images/nav_bar/first_visit_gr.gif);
width:81px;
height:30px;
display:block;
}
#gonstead_chiro a{
background:url(images/nav_bar/gonstead_chiro.gif);
width:162px;
height:30px;
display:block;
}
#gonstead_chiro a:hover{
background:url(images/nav_bar/gonstead_chiro_gr.gif);
width:162px;
height:30px;
display:block;
}
#gonstead_chiro a:active{
background:url(images/nav_bar/gonstead_chiro_gr.gif);
width:162px;
height:30px;
display:block;
}
#faq a{
background:url(images/nav_bar/faq.gif);
width:71px;
height:30px;
display:block;
}
#faq a:hover{
background:url(images/nav_bar/faq_gr.gif);
width:71px;
height:30px;
display:block;
}
#faq a:active{
background:url(images/nav_bar/faq_gr.gif);
width:71px;
height:30px;
display:block;
}
#kid_chiro a{
background:url(images/nav_bar/kids_chiro.gif);
width:124px;
height:30px;
display:block;
}
#kid_chiro a:hover{
background:url(images/nav_bar/kids_chiro_gr.gif);
width:124px;
height:30px;
display:block;
}
#kid_chiro a:active{
background:url(images/nav_bar/kids_chiro_gr.gif);
width:124px;
height:30px;
display:block;
}
#testimonials a{
background:url(images/nav_bar/testimonials.gif);
width:105px;
height:30px;
display:block;
}
#testimonials a:hover{
background:url(images/nav_bar/testimonials_gr.gif);
width:105px;
height:30px;
display:block;
}
#testimonials a:active{
background:url(images/nav_bar/testimonials_gr.gif);
width:105px;
height:30px;
display:block;
}
#contact_us a{
background:url(images/nav_bar/contact_us.gif);
width:101px;
height:30px;
display:block;
}
#contact_us a:hover{
background:url(images/nav_bar/contact_us_gr.gif);
width:101px;
height:30px;
display:block;
}
#contact_us a:active{
background:url(images/nav_bar/contact_us_gr.gif);
width:101px;
height:30px;
display:block;
}
/* NAVIGATION END*/
/* LEFT_CONTENT*/
#left_content {
height: 450px;
width: 500px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
margin-top: 0px;
margin-left: 0px;
float: left;
margin-right: 5px;
background-color:ffffff;
}
/* LEFT_CONTENT END*/
/* REG_CONTENT*/
#reg_content {
height: auto;
width: 800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
margin-top: 0px;
margin-left: 0px;
background-color:#ffffff;
}
/* REG_CONTENT END*/
/* RIGHT_CONTNET*/
#right_content{
height: 450px;
width: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
padding: 0;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
background-color:#e3e3e3;
}
/* RIGHT_CONTENT END*/
h1 {
padding:0;
margin:0;
font-size:16px;
color:#008bcf;
font-family: Verdana;
font-weight: normal;
}
h2 {
padding:0;
margin:0;
font-size:12px;
color:#008bcf;
font-family: Verdana;
font-weight: normal;
}
p {
padding:0;
margin:0;
font-size:12px;
color:#757171;
font-family: Verdana;
}
/* FOOTER*/
#footer {
padding : 0;
width: 800px;
height: 40px;
background: url(images/footer.gif);
margin-top: 2px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
/* FOOTER END*/
.clearfloats {clear:both;}
A:link {
text-decoration: underline; color: #008BCF;
}
A:visited {
text-decoration: underline; color: #008BCF;
}
A:active {
text-decoration: underline; color: #18fa07;
}
A:hover {
text-decoration: underline; color: #18fa07;
}
You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code:
<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li>
<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>
<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>
And the CSS Alignment: Code:
#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}
Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS. The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way. #bottom_center { margin: 0px; padding: 0px; background: #ccc; width: 470px; height: 90px; border-style: ridge; } ---- then in the body ---- <div align="center"> <div id="bottom_center"> <img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc." width="470" height="90"> </div> </div> The problem is fixed now Hello, In the last few days I made this website: http://www.gambiaguesthouse.nl/index.php?site=home I tested it with firefox and once a day i tested it with IE. Now the site works like a charm in Firefox but after the changes I made today It doesn't work under IE. The width of the site is not correct in IE. This is the CSS code of the website, if I remove the "#all..." part that I made bold the width is correct, but then the site gets very ugly. When I put the "#all..." part back the width of the site isn't correct in IE. De W3C CSS checker gives no errors I hope somebody can see what I do wrong, I am working to figure this out for 2 hours now and I can't find out what the problem is Hope you guys can tell me what I did wrong with my CSS code. Code: body { font-family: verdana; background-color: #bbdaf9; margin: 0; padding: 0; }
#all { color: #062A4E; font-size: 14px; background-color: #e9f3fe; position: relative; width: 632px; min-height: 609px; margin: 7px auto 30px; padding: 202px 167px 10px 204px; }
#head { position: absolute; top: 0; right: 0; width: 1003px; height: 187px; padding-top: 5px; background-image:url(img/titel.jpg); }
#footer { position: absolute; top: -500px; }
#con { background-color: #f3f7fb; width: 100%; min-height: 620px; }
#add { position: absolute; top: 198px; padding-top: 4px; right: 0; width: 165px; height: 605px; }
#menu { position: absolute; top: 198px; left: 0; padding-top: 4px; right: 0; width: 200px; height: 150px; }
#login { position: absolute; font-size: 14px; top: 348px; left: 0; width: 190px; background-color: #e0eefc; border-style:solid; border-color:#f3f8fe;}
#rotating { position: absolute; top: 470px; left: 0; padding-left: 5px; padding-top: 4px; right: 0; width: 200px; height: 350px; }
a { color: #c40000; font-size: 10px; text-decoration: none; margin: 0; padding: 0; border-width: 0; cursor: pointer; }
a:hover { color: #c40000; }
.whitetb { color: white; }
img { margin: 0; padding: 0; border-width: 0; }
li { list-style:none; float: left; text-align: center; border-style:solid; border-color:#f3f8fe; }
ul { border-top: 0px solid #FFF; width: 195px; height: 145px; background: #e0eefc; margin: 0; padding: 0; }
a.menuitem { padding-top: 3px; font-size: 16px; color: #062A4E; text-decoration: none; font-weight: bold; display: block; width: 190px; height: 27px; }
a.menuitem:hover { background: #DCEFF8; color: #116086; }
And this is the HTML source code of my website: PHP Code: <html> <title>GambiaGuesthouse.nl</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="all"> <div id="head"></div> <div id="menu"> <ul> <li> <a class="menuitem" href="index.php?site=home" title="Home">Home</a> </li> <li> <a class="menuitem" href="index.php?site=links" title="Links">Links</a> </li> <li> <a class="menuitem" href="index.php?site=toevoegen" title="Guesthouses">Guesthouses</a> </li> <li> <a class="menuitem" href="index.php?site=contact" title="Contact">Contact</a> </li> </ul> </div> <div id="rotating"> <img src="img/rotate1.jpg" id="rotate"></div> <div id="login"> <form target="index.php?site=login" method="POST"> Gebruiker:<br> <input type="text" name="gebruiker" size="27" /><br> Wachtwoord:<br> <input type="password" name="wachtwoord" size="27" /><br /> <input type="submit" value="Log In" /> </div> <div id="add"> add comes here </div> <div id="con"> <b>Gambia</b><br /><br /> Het is een prachtig land, waar je avontuurlijke dingen kan doen. Maar vooral lekker uitrusten op de prachtige stranden. <br>Het is een geweldig gastvrij land.De plaatselijke bevolking bezit een unieke gave.ze kunnen in het nu leven,en genieten van het moment.</p> <p>Dan is er voor je gevoel even geen verleden en ook geen toekomst,alleen het NU en dan kan je echt leven in zijn puurste vorm,je openen en gelukkig zijn,en dit kunnen de mensen in Gambia. <br>Daarom vind ik dit zo een mooi land,het is prachtig om te zien hoe deze mensen kunnen genieten. dankbaar zijn een groot goed is.</p> <p> Op deze website vindt u een zo groot mogelijk overzicht van Guesthouses in the Gambia.</p> <p>Guesthouses zijn huisjes die verhuurd worden meestal door de lokale bevolking en zijn meestal een stuk lager geprijsd van de hotels in Gambia <br>Ook als u met een groot gezelschap van plan bent om naar Gambia te gaan is een Guesthouse de perfecte manier om te verblijven in Gambia.</p></div> </body> </html> I got the following, which is perfectly displayed in IE: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container { overflow: hide; }
#container .content { float: left; margin: 0px 0px -2000px 0px; padding: 0px 0px 2000px 0px; }
</style>
</head>
<body>
<div style="width:585px;overflow:hidden;" id="container">
<div style="width:585px;height:9px;background-image: url(images/product/mid_top2.gif);background-repeat:no-repeat;padding:0px;float:left"></div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;clear:both"></div> <!-- div missing in FF --->
<div class="content" style="width:583px;background-image: url(images/product/mid_back2.gif);background-repeat:repeat-x;">
content goes here..
</div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;float:left"></div>
<div style="width:585px;height:7px;background-image: url(images/product/mid_bottom2.gif);background-repeat:no-repeat;clear:both;float:left"></div>
</div>
</body>
</html>
But the div at the left-side (see comment) is just not shown in Firefox. Can anyone explain why? I've been working on a layout for my site. It consists of a fixed top menu bar, a fixed left-side menu bar, a fixed right-side bar (possibly used for ads; not sure yet), and a scrollable middle content section. Think a modified Facebook layout. I've been testing with Firefox, and here's what I ended up with (remove the spaces; as a new user, I can't post images, either): htt p://dl.dropbox.com/u/11662651/Graphics/SiteStuff/LayoutGoo d.png That's perfect. It's exactly what I wanted. But then, once I finished it, I tried to test it in IE for compatibility. I almost cried. Almost every aspect of the layout was just completely messed up. Nothing remains fixed when I scroll. Although the menu bar's background color shows it in the right place, all its content shows up below the left-menu instead. In fact, ALL content besides the left-menu shows up below the left-menu instead of in its correct place. And as if that weren't enough, the bullet points on the left-side menu's list (a UL) show up aligned to the left, while the text is aligned to the right (it should be to the right). Besides fonts, not one thing in the layout is correct in IE. But it's all PERFECT in Firefox. I don't usually do this, but because of the scale of how many things are wrong, and because it's only messed up in IE, I'm going to post a download to the .HTML file and ask you to help me figure out what's going on here. So, here's the file (remove the spaces; I'm a new user so I can't post links): htt p:// dl.dropbox.com/u/11662651/Graphics/SiteStuff/index .html?dl=1 Please, please, please, at least get me on the right track to fixing this. And, in related news, I hate IE. Very much. -IMP Hi, I'm relatively new to web development and I am self taught so please forgive any noobish comments haha. Basically I am building my company's web page and I have it all done except for one small discrepancy. My navigation bar at the top of the page has 4 links to the various sections of the website and they are in the right place in Safari, Chrome, Firefox, and Opera but in IE they are all out of whack. I've been banging my head against the desk trying to figure out whats wrong with either my CSS file or HTML code with no luck. I've validated both my CSS and HTML on the W3C validators and they come back with no errors. Not even a warning. Its all valid code. So I've heard this is common when dealing with compatibility issues that IE is the worst. So could someone please take a look at my code and see if they can find out whats wrong? Here is my CSS... #navbar { font-family: "Frutiger LT 55 Roman", Arial, sans-serif; height: 103px; width: 792px; padding-bottom: 0px; background-color: #0097c6; } #bigpic { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #leftcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 15px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #rightcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #threecol-mid { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 10px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #threecol-right { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #leftcol-nohead { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #footer { width: 792px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; color: #999999; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 8pt; border-top-style: dotted; border-top-color: #999999; border-bottom-style: dotted; border-bottom-color: #999999; border-width: thin; clear: both; } .logo { padding-top: 18px; padding-left: 10px; padding-right: 10px; float: left; } #navlinks { padding-top: 4px; padding-right: 5px; margin-bottom: -4px; position: relative; float: right; } .allcontent { width: 800px; margin-left: auto; margin-right: auto; } h2, h3, h4, h5 { margin-right: 1px; margin-left: 0px; margin-bottom: 0px; margin-top: 1px; padding-bottom: 0px; padding-top: 0px; font-family: Arial, sans-serif; } .heading1 { font-family: Arial, sans-serif; font-size: 16pt; } .heading2 { font-family: Arial, sans-serif; font-size: 10pt; font-weight: bold; } a { text-decoration: none; color: #0097c6; } img { border: 0; } .disclaimer { font-family: inherit; font-size: xx-small; } The problem lies with the navlinks ID I think. Basically, IE doesn't put the images (which are also links) where I want them while all the other browsers do. Something funky about the way IE reads CSS maybe? I don't know. If more info or code is needed I'll gladly provide. Thanks in advance, Griz I've been trying to tweak the styling on hxxp://beecycle-co-uk.domain-ref.http.xenon.lon.periodicnetwork.com/Products.aspx?category=2&product=8 for a while now, and for some reason that page's #wrappper is aligned left, not center. I've picked through each element but I can't see any reason for it to do that. Am I missing something? http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The borders are not aligning correctly. Hi all, Not sure if I'm aligning the container of this page properly: http://ntcjapan.com/languages/arabic/ The page is right-aligned and displaying correctly on all browsers except I.E. 5.0 On IE 5.0, the container remains on the left of your screen, not on the right. Due to arabic text, etc., the direction of the body is rtl The CSS (note the "container" div at the end, plus its margin): Code:
body {
height:100%;
margin: 0px;
padding: 0;
background: #FFFFFF url(../../../images/0_bg_body.jpg) no-repeat fixed -5px 100px;
}
body {
font-family: "Simplified Arabic", "Arabic Transparent", "Traditional Arabic", "Arial (Arabic)", "Times New Roman (Arabic)", "AGA Arabesque", "NaskhTT", "Akhbar MT", "Courir New (Arabic)", "Decotype Naskh", "Mudir MT", "Simplified Arabic fixed", "Tahoma (Arabic)", "Andalus", "Monotype Koufi", "Decotype Naskh Extension", "Decotype Naskh Special", "Decotype Naskh Swashed", "Decotype Naskh Variants", "Decotype Naskh Thuluth", "Simplified Arabic backslanted", "Traditional Arabic Backslanted", Arial,Helvetica,sans-serif;
line-height:19px;
font-size: 13pt;
font-weight:bold;
}
p {
direction:rtl;
}
div {
text-align:right;
direction:rtl;
}
#container {
margin: 0 0 0 auto;
text-align: left;
width: 762px;
background: url(../images/0_bg_right.gif) repeat-y fixed top right;
min-height: 100%;
height: auto;
direction: ltr;
}
I suppose I need an additional style for IE 5.0 and 5.5 - to tell those browsers to align the container to the right. Any ideas? Thanks in advance! I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background color or use this in several apps). Any thoughts? Thanks, Jeremy I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background colo or use this in several apps). Any thoughts? Thanks, Jeremy Sounds weird, but you know us designers are always looking for fresh ways to present content. I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left. Any ideas? Wow I REALLY hate CSS. For hours I have been trying to figure this out: Here is some HTML Code:
<td>
<div class="linksbar">
<div class="linkstext">
link - link - link - link
<img src="imagelink.jpg">
<img src="imagelink2.jpg">
</div>
</div>
</td>
[CODE]
the CSS
[CODE]
.linksbar {
height: 28px;
background-image: url(bg.jpg);
}
.linkstext {
vertical-align: middle;
line-height: 28px;
font-weight: bold;
color: white;
}
First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle. Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something. Hi there! About a week ago I posted here about an issue, and I received an immense amount of support, so I figured I'd come back here with anything I ran into! My website, in its current state, can be found here. You'll notice that the right column is stuck below the main content area. This is undesirable. Ideally, that gray box would align with the top of the content area, thus creating a simple 2-column layout. In IE (at least version 7), the gray box is shown BELOW the main content area, but still completely inside the #contentwrap div. In Opera and Firefox, however, the gray box is partially in and partially out of the #contentwrap div. I'm not sure what this is due to, (perhaps something weird in my coding?), but either way I just need to get that column to align with the top of the main content area. My code validated fine (but of course that doesn't make it perfect...), and I have provided the complete code for both the (X)HTML and the CSS below: Code: xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Function T .:. Home</title> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="entire-page"> <div id="page-container"> <div id="ghost"></div> <div id="header"></div> <div id="navigation"> <ul id="linkmenu"> <li class="n-home"><a href="#"><span>Home</span></a></li> <li class="n-bio"><a href="#"><span>Bio</span></a></li> <li class="n-media"><a href="#"><span>Media</span></a></li> <li class="n-contact"><a href="#"><span>Contact</span></a></li> <li class="n-reviews"><a href="#"><span>Reviews</span></a></li> <li class="n-tutorials"><a href="#"><span>Tutorials::</span></a></li> <li class="n-charts"><a href="#"><span>Charts::</span></a></li> <li class="n-links"><a href="#"><span>Links</span></a></li> </ul> </div> <div id="contentwrap"> <div id="content"> <h1>New Website Launched!</h1> <h2>10.01.2008</h2> Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/> No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari.<br/><br/> Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/> Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/> <h1>This is Only a Test</h1> <h2>10.01.2008</h2> Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/> Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/> Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/> Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/> <h1>New Site Coming Soon!</h1> <h2>09.29.2008</h2> Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/> Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. </div> <div id="rightbar"> <h2>THIS IS A TEST</h2> I am trying to see if I can get this column to align to the top of my browser content-wrapper div!<br/><br/> Unfortunately, I can't seem to get it to work!<br/> </div> </div> <div id="content-bottom"></div> <div id="footer"> Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/> All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/> and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/> for promotional purposes only. Duplication of any material in part or in whole without the <br/> express written consent of Tom Winchester is strictly prohibited. </div> </div> </div> </body> </html> Code: css
html, body {
margin: 0px;
padding: 0px;
background: url(../images/bgpattern.gif);
}
#entire-page {
}
#page-container {
margin: auto;
width: 750px;
}
#ghost {
height: 15px;
}
#header {
height: 110px;
background: url(../images/headers/rotator.php);
background-repeat: no-repeat;
}
#navigation {
width: 750px;
height: 40px;
background: url(../images/navigation.gif);
background-repeat: no-repeat;
}
ul#linkmenu, #linkmenu li {
padding: 0px;
margin: 0px;
list-style: none;
}
ul#linkmenu {
float: left;
height: 0;
}
#linkmenu li {
font-family: "Times New Roman", Times, Georgia, sans-serif;
position: relative;
width: 10px;
}
.n-home {
top: 7px;
left: 30px;
font-size: 22px;
}
.n-bio {
top: -18px;
left: 116px;
font-size: 22px;
}
.n-media {
top: -43px;
left: 179px;
font-size: 22px;
}
.n-contact {
top: -70px;
left: 271px;
font-size: 24px;
}
.n-reviews {
top: -95px;
left: 392px;
font-size: 22px;
}
.n-tutorials {
top: -120px;
left: 485px;
font-size: 22px;
}
.n-charts {
top: -145px;
left: 592px;
font-size: 22px;
}
.n-links {
top: -170px;
left: 678px;
font-size: 22px;
}
#linkmenu li a {
text-decoration: none;
background: none;
}
#linkmenu li a span {
visibility: hidden;
}
#contentwrap {
background-image: url(../images/contentbg.gif);
background-repeat: repeat-y;
width: 750px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#content {
width: 495px;
padding-right: 245px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #858585;
}
#rightbar {
float: right;
width: 225px;
margin-left: 505px;
margin-right: 10px;
background: gray;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #000000;
}
#content-bottom {
height: 5px;
background-image: url(../images/contentbgbottom.gif);
background-repeat: no-repeat;
}
#footer {
height: 80px;
padding: 5px;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 11px;
color: #cfcfcf;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-size: 24px;
font-weight: 200;
color: #1c2939;
}
h2 {
margin-top: 0px;
margin-bottom: 7px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-size: 12px;
font-weight: 200;
color: #c49271;
}
THANK YOU!!!! -Tom Winchester- Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell? Code: <table><td valign="middle" height="100">This text is vertically aligned</td></table> Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV. Thanks for the help. How to get a text aligned vertically in a css button? Hi, I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser. How can I keep the text in the same position on all monitors? Here is what I have so far (I am very new to css): #content { text-align: left; width: 1060px; padding: 0px 30px 0px 30px; margin-left: auto; margin-right: auto; } Thanks Cameron |
|||||||