|
CSS - Link Not Working In Ff/chrome But Does In Ie
I generate the following in my PHP script and it seems to work in IE but not in FF or Chrome. It doesn't redirect to the pdf file nor does it appear in the status bar when I mouse over it.
<div id="downloadts"><a href="URL address/Tearsheets/MP-160.pdf" class="button">Download Tear Sheet</a> </div> The downloadts looks like #downloadts { height:auto; width:150px; border:thin; background-color:#999999; position:absolute; top:365px; left: 15px; text-decoration:none; } and the button is in a separate style sheet as .button { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; font-size: 12px; color: #FFFFFF; font-weight: bold; font-style: normal; text-decoration:none; line-height: 20px; background-color: #999999; } I don't see what is wrong. It appears on the page as I expect it to. I am baffled and don't doubt it is something simple. It passes validation as well. You can see it in action at: mandp dot lamster dot org/product.php?coll=French%2040%27s&catno=MP-160 Thanks for any help. Hal Similar TutorialsI have a layout that seems to work in IE8, but throws Chrome for a loop. Something tells me that it working in IE8 is a bad sign... In IE8 the bottom of the screen and the div have a space between them. In Chrome, they are butted up against each other, and the coloring between the footer (I think) and the bottom of the screen is blue (where it should be cream). Have not tested in FF, I would assume the same issue. Thanks ahead of time for the help, -Gnome101 CSS Code:
html {
margin:0;
padding:0;
}
body {
background-color:87CEFA;
margin-top:35px;
margin-bottom:10px;
}
#container {
background-color:FAF0E6;
left:15px;
width:60%;
height:100%;
position:relative;
border-bottom:1px solid black;
}
#header {
width:100%;
background-color:87CEFA;
padding:0px;
}
#footer {
position:absolute;
bottom:10px;
width:100%;
height:25px;
}
#content{
width:100%;
border:1px solid black;
}
Page - I know there are blank spaces, but I am doing this in Lotus/Domino...so the blanks are filled with html... Code:
<div id="container">
<div id="header">...</div>
<div id="content">...
<div id="managerArea">
...
</div>
</div>
<div id="footer">
...
</div>
</div>
I am a complete novice and have helped someone with their website. All fine in IE but the sub menus do not work in Chrome? If you hover over Domestic Services (for example) in the main menu which runs down the left of my web site a sub menu appears to the right in IE (I have version 7) but not in Chrome (which I've just downloaded so I have the newest version). It all works just as I want it to do in IE7. Is this a Chrome issue or more than likely I have done something wrong. Can anyone help me, sorry I have tried but I can't see what I've done wrong. Thanks for any help - Lindsay. Here is my CSS /* Menu properties */ #left-menu{ width:210px; height:265px; border-left:#474843 19px solid; background-color:#171717; padding:30px 0px; } #left-menu ul { margin:0; padding:0; list-style:none; } #left-menu ul li { margin:0px; padding:0px; height:20px; line-height:20px; } #left-menu ul li a{ font-family:Tahoma, Verdana, Arial, sans-serif; font-size:12px; font-weight:normal; text-decoration:none; color:#D7D7D7; background:url(images/left-menu.gif) 26px 5px no-repeat; padding-left:47px; } #left-menu ul li a:hover{ background:url(images/left-menu-hover.gif) 26px 5px no-repeat; text-decoration:underline; color:#CC0000; } #left-menu ul ul { position: relative; top: 0; display:none; margin:0; padding:0; } #left-menu ul li ul li { } #left-menu ul li ul li a:hover{ } #left-menu ul li:hover ul{ display: block; position:absolute; top:325px; padding-right:50px; padding-top:5px; padding-bottom:5px; border-right:#474843 19px solid; border-left:#474843 2px solid; border-top:#474843 2px solid; border-bottom:#474843 2px solid; background-color:#171717; } And here is the HTML <ul id="left-menu"> <li><a href="../index.html">Home</a></li> <li><a href="../domestic.html">Domestic Services</a> <img src="../images/arrow_r.gif"> <ul> <li><a href="../domesticglass.html">Window & Glass Care</a></li> <li><a href="../domesticextbuilding.html">Exteriors of Buildings Cleaned</a></li> <li><a href="../domesticdecking.html">Path Decking & Patio Cleaning</a></li> <li><a href="../domesticconservatory.html">Conservatory Valeting</a></li> <li><a href="../domesticgutter.html">Gutter, Soffit & Fascia Cleaning</a></li> </ul> </li> <li><a href="../commercial.html">Commercial Services</a> <img src="../images/arrow_r.gif"> <ul> <li><a href="../commercialglass.html">Window & Glass Care</a></li> <li><a href="../commercialgutter.html">Gutter & Fascia Cleaning</a></li> <li><a href="../commercialextbuilding.html">Exteriors of Buildings Cleaned</a> </li> <li><a href="../commercialsign.html">Sign Cleaning</a></li> </ul> </li> <li><a href="../quote.html">Quotations</a></li> <li><a href="../waterfedpole.html">Water Fed Poles</a></li> <li><a href="../health.html">Health and Safety</a></li> <li><a href="../faq.html">FAQ</a></li> <li><a href="../photos.html">Photo Gallery</a></li> <li><a href="../aboutus.html">About Us</a></li> <li><a href="../contact.html">Contact Us</a></li> <li><a href="../links.html">Links</a></li> </ul> Hi all, Code: .box1 {
position: absolute;
top: 20px;
left: 20px;
width: 220px;
height: 152px;
background: transparent url(../images/box-1_im-back.gif) no-repeat;
padding: 50px 54px 0px 25px;
}
I've got a div with position absolute on it, width, height, padding, etc. I've got an A tag inside it which I've also made position absolute, and expanded it to cover the whole div, so it acts as a button over the whole div and it works in everything BUT IE6 and as much as I'd like to forget about this browser, it's still quite common, so. Anyone know why this is happening or how I can fix it? Code: .box1 a {
position: absolute;
top: 0px;
left: 0px;
color: #0b54a9;
font-weight: bold;
padding: 126px 0px 0px 26px;
width: 260px;
height: 48px;
}
If I take the A tag out of the div and absolute position it over the div it works fine, the only trouble is I really need to keep the A tag inside the div. I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan Here is the page the > Enlarge link below the picture doesn't work in FF - but it does in IE. I was wondering if it was because it was an absolute position?? Or is something else going on?? Here is the css: Code:
#productPage .compact a {
text-decoration: underline;
position: absolute;
right: 175px;
top: 200px;
}
Here is the xhtml: Code:
<span class="productImg"><img src="../images/compact.jpg" width="249" height="205" alt="Vitalograph COMPACT spirometer" /></span>
<span class="compact"><a href="../images/compact_large.jpg">>Enlarge</a></span>
Hi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc. I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated. If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future? The CSS lives at the above address /ladybird.css Thank you very much. Ant hi, i am using a navigation bar at the top of my pages (http://sa-ewb.org.uk ) that has been designed with CSS and java (thanks to http://www.gazingus.org ). I have set it up so that visited links have no decoration and do not change colour in the navigation, as opposed to the main body of text where they do behave as normal links. i.e. a:visited {.......normal behaviour and a.actuator:visited {.......no changes to appearance this works fine in firefox (gotta love it!) but in internet explorer, for some reason, it ignores the 'a class="actuator"' and uses my normal link rules. (gotta... errr... not love it!) any ideas? many thanks, jim. Hello, My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all. I see this happenning with IE 6.x and FireFox 1.5 and netscape 7 Example HTML code where the unvisited link appears in Red and it should be in Grey: Code: <div class=medGray> <a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records). </div> Here's my snippet from my CSS file: Code:
a.medGray:link {
text-decoration: underline;
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }
my layout is pretty simple... Code: <div class="container"> <div class="topbar"> <div class="list"> <div class="gametitle"></div> <div class="percentage"></div> <div class="system"></div> </div> </div> i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work... Code: .gametitle {
float:left;
width:250px;
color:#FFF;
}
.gametitle a:link,
.gametitle a:visted,
.gametitle a:hover {color:#FFF;}
.percentage {
float:left;
color:#FFF;
}
.percentage a:link,
.percentage a:visited,
.percentage a:hover {color:#FFF;}
.system {
float:right;
color:#FFF;
}
.system a:link,
.system a:visited,
.system a:hover {color:#FFF;}
here is the page where all this code is going down... Mini Catalog This code works in IE but not in FF. Does Firefox not support these? <style type="text/css"> <!-- A:link { text-decoration: underline; color:"#ffffff"; } A:visited { text-decoration: underline; color:"#ffffff"; } A:active { text-decoration: underline; color:"#ffffff"; } A:hover { text-decoration: none; color:"#fffffff"; } Body { background:url(http://n0madism.tripod.com/mbg.jpg); background-color:#000000; background-repeat: no-repeat; font-family:Georgia; color:#ffffff; font-size:10 pt; text-align:left; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #FFFFFF; } td { font-family:Georgia; color:#ffffff; font-size:10 pt; } --> </style> I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options? Option 1 is he http://concrete-creative.com/temp/print/1.html **What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up. Option 1_B is he http://concrete-creative.com/temp/print/1_B.html **The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide. Can someone help me find the happy medium between these 2 solutions so it works the way I want it to? THANKS! Everyone, I'm having an issue with the first DIV intensive site I am doing: IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing: httP://www.ephire.com/mack If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine: Here is the code I think is the culprit: Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MACK Insurance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
* html #wrapper {
background: url(images/body_t.gif) 24px 0px no-repeat;
backgro\und: none;
}
* html #ie {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
height: 39px;
width: 434px;
position: absolute;
margin-left: 24px;
}
* html #body {
background: url(images/body_bg.gif);
backgro\und: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}
.footerie {
display: block;
disp\lay: none;
}
.footer {
display: none;
disp\lay: block;
}
</style>
<![endif]-->
</head>
<body>
<center><table><tr><td> <div id="ie"></div>
<div id="wrapper">
<h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
<div id="body">
<div class="inner">
<div id="content"><div>
<font face="Arial" size="2"><b>Health, Life, Disability</b></font>
<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
</div></div><!-- end content -->
<div id="page_title">
<img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
</div><!-- end page_title -->
<div id="news"><div><div>
<font face="Arial" size="1"><b>Things to Consider</b></font>
<img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
<p>04-20-2006</p>
<p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
</div></div></div><!-- end news -->
<div class="clear"></div>
</div><!-- end .inner -->
<div id="footer">
<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
</div><!-- end footer -->
</div><!-- end body -->
<div id="paper">
<div class="inner">
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
<p>A single plan can add peace of mind, all three together can insure stability.</p>
<center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
</div><!-- end .inner -->
</div><!-- end paper -->
</div><!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" >
</div></td></tr></table></center>
<center><br><table><tr><td> <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>
Any help is appreciated~ please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? Thanks for taking the time to read my question. I'm having to update a site I did a while ago, and am now quite out of practice, as I've done nothing since. I made the site before Chrome was released, and now, since I'm updating it, would like to make sure it displays properly in Chrome as well. I have buttons for my top nav, that when you hover over them increase in size. The text on the button is not a part of the image. The text in question is "Contact Us" in FF and IE the text wraps after Contact, with the Us underneath it. In Chrome it stays on one line. If I decrease the size of my <div> by one pixel the text wraps in Chrome. I can't do that though as it shaves off one pixel of my button image. I can't seem to find a site that will tell me what the difference is between Chrome IE and FF. Here is my css and html for my nav if it helps. attached is a pic of the difference. The red is to sho the navcontainer div. Notice the difference in the Contact Us button. Thanks, Brad HTML: Code: <div id="navcontainer">
<ul>
<li class="Active OneLineAct">Home</li>
<li class="NotActive1 OneLine"><a href="ZoneAll-Products.htm">Products</a></li>
<li class="NotActive1 TwoLine"><a href="ZoneAll-ContactUs.htm">Contact Us</a></li>
<li class="NotActive2"><a href="wadsz3000.htm">Wiring Diagrams</a></li>
<li class="NotActive1 TwoLine"><a href="stahr.htm">What’s New</a></li>
<li class="NotActive2"><a href="application.htm">Sample Specs</a></li>
<li class="NotActive2"><a href="tshooting.htm">Trouble Shooting</a></li>
</ul>
</div>
CSS: Code: #navcontainer ul
{
margin: 10px 8px 0px 0px;
padding: 0px;
/*background-color: transparent;*/
background-color:red;
color: #000000;
width: 728px;
font-family:Arial, Helvetica, sans-serif;
float: right;
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li.Active {
text-decoration: none;
text-align: center;
float: left;
width: 104px;
height: 70px;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
/*letter-spacing: .1em;*/
/*padding: 20px 0px 0px 0px;*/
margin: 0px 0px 0px 0px;
font-size: 22px;
}
#navcontainer ul li.OneLineAct{
padding: 20px 0px 0px 0px;
}
#navcontainer ul li.TwoLineAct{
padding: 10px 0px 0px 0px;
letter-spacing: .11em;
}
#navcontainer ul li.NotActive1 a {
text-decoration: none;
color: #000000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
margin: 10px 12px 0px 13px;
font-size: 14px;
}
#navcontainer ul li.NotActive2 a {
text-decoration: none;
/*color: #000000;*/
color:#990000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
letter-spacing: .1em;
margin: 10px 12px 0px 13px;
padding: 12px 0px 0px 0px;
font-size: 14px;
}
#navcontainer ul li.NotActive1 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 30px 0px;
font-size: 20px;
float: left;
}
#navcontainer ul li.NotActive2 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 13px 0px;
padding: 8px 0px 0px 0px;
font-size: 20px;
float: left;
}
#navcontainer ul li.OneLine a{
padding: 18px 0px 0px 0px;
}
#navcontainer ul li.TwoLine a{
padding: 12px 0px 0px 0px;
letter-spacing: .11em;
}
#navcontainer ul li.OneLine a:hover {
padding: 20px 0px 0px 0px;
}
#navcontainer ul li.TwoLine a:hover {
padding: 10px 0px 0px 0px;
}
I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? Hello everyone. I am new to CSS and I have been trying to create a CSS layout composed of a 2x2 grid using DIVs. The top cells have fixed width and height, with the bottom ones having fixed width and variable height depending on the content. I achieved this with success as they look as intended in IE8 (don't have 9 available) and the latest versions of Firefox and Opera. In Chrome (and Safari for that matter), sometimes it will render just fine or look one or two pixels out of place depending on the width of the browser window. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
html,body {
margin: 0px;
background-image: url(http://i.imgur.com/NHbHt.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;
text-align: center;
}
#wrap {
width:750px;
margin:0px auto;
text-align:left;
}
#topleft {
display:block;
margin-left:1px;
float:left;
width:572px;
height:127px;
background-color:#ccc;
padding:0px 0px
text-align:left;
}
#topright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
height:127px;
background-color:#ffffff;
padding:0px 0px;
text-align:left;
}
#bottomleft {
display:block;
margin-left:1px;
float:left;
width:572px;
background-color: yellow;
padding:0px 0px
text-align:left;
}
#bottomright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
background-color:green;
padding:0px 0px;
text-align:left;
}
</style>
</head>
<body>
<div id="wrap">
<!-- Slideshow -->
<div id="topleft">
topleft
</div>
<!-- Logo -->
<div id="topright">
<img src="logo.png" alt="logo" width="175" height="127">
</div>
<!-- Contents -->
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. Praesent non odio velit.
</div>
<!-- Menu -->
<div id="bottomright">
bottomright
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>Sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. </p>
</div>
</div>
</body>
</html>
The lines shown are part of the background, as it was the easiest solution I came across with to make it look like the columns go all the way down to the bottom of the page. So, I believe my issue lies on the DIVs and/or the centered background but I have no idea how to work around this. Thanks in advance for your time and advice. Cheers |
|||||||