|
CSS - Positioning Problem First Time Page Is Viewed (ff, Ie)
Hi, this is my first posting on these forums, so my apologies in advance if I break some unwritten rules.
I have developed a web page for friend who wanted four large area of the home page to act as buttons but not look like buttons. Each area contains an image and some text and the complete are should be clickable and should change colour when the mose moves over it. I prefer a pure html/CSS solution rather than resorting to Javascript, so I came up with the following The html for each area is: <div id="homePageTopicArea"> <ul> <li> <a href="workshops.html"> <img src="images/homePage/topic1Image.jpg" /> <div class="homePageTopicTextHeader"> <h1>Inspiring Workshops</h1> </div> <div class="homePageTopicText"> <p> This range of clear .......... </p> </div> </a> </li> and the CSS is #homePageTopicArea { height: 100%; width: 734px; margin-top: 10px; margin-left: 280px; } #homePageTopicArea ul { list-style-type: none; width: 734px; padding-left: 0px; margin-left: 0px; } #homePageTopicArea li { outline: none; border: 0; margin-top: 15px; height: 145px; } #homePageTopicArea li a { display: block; height: 145px; outline: none; text-decoration: none; } #homePageTopicArea li a:hover { background-color: #AEB8CB; } This works great when the page is viewed in Safari. But when I use Firefox 3.5.6 or IE7, I get an error on the page, the images are correctly positioned but the text from one of the boxes, always the second or third, never the first or last, is displayed in the wrong position, way too low down the screen, and it is in the bright blue, or purple, of an unmodified link code. If you click on the refresh button the page always displays correctly. Can anyone explain this behaviour? I have screenshots but dont know how to attach them. Similar TutorialsI am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column. Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px; Here is my HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}
.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}
.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}
.heading {
position: absolute;
left: 0px;
top: 0px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}
.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>
<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>
<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>
<div class="heading">
head content
</div>
<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
Hi, im having problems with disjointed rollovers. It works fine in explorer but wont work in firefox. It seems to be about 10px lower in firefox. Someone please help!!!!!!!! Go to mediahost.aib.ac.uk/fdashow07/gibson/louise/coast.php to see the page im having truble with. This is my html code of the dis jointed rollovers, <div class="projtitle"><h1>Coast, 2007</h1></div> <div class="thumbnailscolumn"> <a class="thumbnail" href="coast.php"><img src="images/cliff1_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff1.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff2_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff2.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff3_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff3.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff4_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff4.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> </div> This is my css, .projtitle{ float: left; width: 800px; height: 20px; padding-top: 27px; } .thumbnailscolumn{ float: left; padding-top: 0px; width:100px; height: 456px; margin-top: 24px; } .thumb{ margin: 0px 5px 5px 0px; } .thumbnailtwo{ margin: 0px 5px 5px 0px; } .thumbnailtwo:hover{ background-color: transparent; } .thumbnailtwo span{ position: absolute; visibility: hidden; text-decoration: none; } .thumbnailtwo:hover span{ top: 206px; visibility: visible; left: 610px; } Thanks Sam I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo how can I highlight the link which I am currently viewing? Hi, I have designed a webpage for a local organization, and am having some trouble with the navbar at the top of the page. This issue only happens in Firefox, as far as I can tell. The homepage (go to radnorhistory.org) is correct, and several other pages are messed up (click on 'membership,' for example); the first link, titled "collection" shows up as a text link above the navbar and not an image. Any ideas? -Thanks! Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help! I'm trying to adjust the location of the "main menu" on this page he http://www.jeditemplearchives.com/hasbrodb/welcome.php Currently, it is set in reference to the side of the browser in this CSS code: Code: .menuContainer
{
position: absolute;
top:113px;
right:210px;
margin: 10px;
margin-top: 50px;
}
I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links: Code: #header ul.headerLinks
{
list-style-type: none;
margin: 0px;
padding: 10px;
position: absolute;
right: 0px;
top: 95px;
white-space: nowrap;
}
Thanks for any suggestions anyone comes up with! I want to place the page title on the left and the pages logo on the right of the page. The logo must be directly accross from the title. Can anyone suggest some CSS and html Below is my feeble attempt HTML: <div id="header"> <p>Report Title <span class="logo"><img src="logo.gif"> </span> </p> </div> CSS: #header p { text-align: left; } #header .logo { text-align: right; } Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page: http://www.zeroonedesign.com/aboutus.html Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit. Take a look at my version he http://obelix.ca/zeroone/aboutus.html I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures? I have an input box with CSS positioning on it that only breaks in IE7. The input box is contained in a div that lives inside a <td>. when the pages loads, the input box is out of position. When I click on a checkbox, it immediately slides into the correct position. The strange thing is, the checkbox makes an onclick call to a function that contains JQuery dealing with disabling and enabling the field. No positioning or css is manipulated in that function. It almost seems like the position of that input box is not loading when the DOM loads. However, with that in mind, I used the developer tools for IE7 (the only browser it messes up in) and noticed when the page loads it has the correct values in the CSS style. When I click the checkbox and the input box moves, the values never change. The page doesn't recognize the input box is in the wrong location. Please help!!!!! I am including my CSS below: form div input.fileUploadbox_overlay_FuelSurcharge { position: relative !important; width: 209px !important; margin: 0 55px 0 -288px !important; } (SOLVED) I have positioned a navigation line (previous page, next page, etc) at the top of my static html page using the following css <p class>: p.navigationTop { position:relative; float:right; top:-95px; font-size:0.9em; } It sits inside #content { line-height:1.6em; margin:-95px 185px 5px 185px; padding:0; text-align:left; } It works fine in FF, Opera, Chrome and IE8, but then came IE9, and in that version my simple navigation is way out of place, i.e. too high up (probably those 95px). Has anybody any suggestions as to how I can remedy this? I would be grateful for some help. Gloria2 im building a simple catalogue for my website and in my content area im having problems getting the look i want: but im having the image section not go down to the bottom of the container div, making text go directly underneath the image. Code: <html> <head> </head> <body> <div> <div style='float:left;border:1px solid #000000;'> image </div> <div style='border:1px solid #000000;'> title<br/><br/> description </div> </div> </body> </html> this is very frustrating as i know i could do this easily with tables :/. There must be some property i can set to stop this from happening? Hi everyone I have been relaying out a webpage using css divs rather than tables for xhtml compliance and also for useability standards. Now the page works perfectly on the following browsers and platforms... PC - Internet Explorer 6 PC - Mozilla/Firefox Mac - Safari BUT on IE 5.2 on a Mac it totally ignores the stylesheet positioning and lays the divs out down the page rather than where they should be positioned. Can anyone shed any light on this please? http://172.24.194.26/3col.asp - css positioned layout http://172.24.194.26/ie.css - alternate ie css http://172.24.194.26/main.css - css file I've been going through and fixing bugs in IE6, but one in particular is just not cooperating. My header has a horizontal menu and the positioning of it wasn't right in IE6. I changed it to "position:absolute, top:86px". Before, I was using floats. This eliminated white space between two bg images, but caused a new padding problem. Now, IE6 and IE7 both have an issue. In Firefox, "top:86px" lines the menu up perfectly with the baseline of one of the images. In IE6 and IE7, it is 10px short as I have to adjust it to "top:96px" for those browsers to line the menu up. Man, everything was going great until I downloaded and tested IE6 today! i have this table: Code: <table width="200" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-image: url('help_tl.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
<td style="background-image: url('help_top.gif'); background-repeat: repeat-x; background-position: bottom;" width="180" height="25" colspan="3"><img src="./help_pointer_tl.gif" height="25" width="15" alt="..."/></td>
<td style="background-image: url('help_tr.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
</tr>
<tr>
<td style="background-image: url('help_left.gif'); background-repeat: repeat-y;" width="10"></td>
<td style="vertical-align: top; background-color: #FFFFE1;" width="20"><img src="./help_icon.gif" height="20" width="20" alt="..."/></td>
<td style="background-color: #FFFFE1; font-weight: bold; font-family: arial; font-size: 12px; vertical-align: middle;"> Login Help</td>
<td style="vertical-align: top; background-color: transparent; text-align: center;" width="20"><img name="close" id="close" src="./close_norm.gif" height="18" width="18" alt="Close this Window"/></td>
<td style="background-image: url('help_right.gif'); background-repeat: repeat-y;" width="10"></td>
</tr>
<tr>
<td valign="bottom" style="background-image: url('help_bl.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
<td valign="bottom" style="background-image: url('help_bottom.gif'); background-repeat: repeat-x; background-position: bottom;" height="10" colspan="3" width="180"></td>
<td valign="bottom" style="background-image: url('help_br.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
</tr>
</table>
but the image called 'close' should be right aligned in the cell, but i cant seem to get it to do so. am i missing something simple? Hello I have a page I am testing www.amalgam-models.co.uk/james/test2.htm It seems to work in all main browser accept IE5 mac. I have put a hack in which works but doesnt centralize the box: .container { background-color: transparent; position: absolute; top:100px; left:200px; } /* following rules are invisible to IE 5 \*/ .container { position:absolute; left:50%; top:50%; width:730px; height:404px; margin-left:-365px; margin-top:-202px; } /* styles for IE 5 Mac */ Is there any way of doing this to centralize an absolutly positioned box in Ie5 mac? Any help would be greatly apreciated Thanks Hi, Plz see this page- http://www.quizmetro.com/articles/marriage This page is working well in firefox but in IE, the mid content part gets pushed down by about 700-800 pixels. Also there is a line of 2 pixels on the right side of the header. This problem is only occuring in the category page but the article page is working fine- http://www.quizmetro.com/articles/marriage/valentines-day-and-married-couples.php Can anyone help me with this? Thanks, Nishant My page is valid xhtml 1.0 strict and valid css 2, however.. i'm still having a problem. for some people, who use IE 6, are having trouble viewing my page correctly. for my (also using IE 6 and firefox) it works perfect. the address is: http://invalidheart.org/about.php the problem that happens is the content overlaps the navigation menu.. any idea why? i have NO clue.. it's driving me nuts, I want to put my page up, but I can't until i figure this out. Thanks SO much for your time css: http://invalidheart.org/default.css I'm having a problem with the positioning of my navbar in IE, the problem page is http://www.mckr.ie/test.html In Opera the left navbar div and the main content div are positioned fine but in IE they go up on the page for some reason? Its strange because they are absolutely positioned. Please can you help? Here is the HTML code for the page: Code: <div id="bannerdiv"></div>
<div id="contentdiv"><!-- InstanceBeginEditable name="content" -->
<h1>Welcome to the McKeever Rowan Solicitors/Lawyers Website</h1>
<p>McKeever Rowan Solicitors is a long established Irish law firm located in the International Financial Services Centre in Dublin, Ireland. We also have an office in Paris and representation throughout the European Union through our membership of <a href="http://www.cyrus-ross.com/home.htm">Cyrus Ross International</a>.</p>
<p>The law firm has in depth knowledge of specific industry sectors, which it brings to bear in advising in these sectors and which will save clients time and resources in buying legal services. Our focus always is in providing clear legal advice of the highest quality based on a thorough understanding of the industry sector involved. </p>
<p></p>
Our areas of expertise include:
<ul>
<li> Corporate Law</li>
<li>Regulatory and Commercial Law</li>
<li>Communications and Utilities Law</li>
<li>Information Technology Law</li>
<li>Technology and Electronics Law</li>
<li>e-Commerce Law</li>
<li>Financial Services Law</li>
<li>Litigation</li>
<li>Banking Law</li>
<li>Insolvency, Bankruptcy and Corporate Law</li>
<li>Recovery </li>
<li>Commercial Litigation, Arbitration and ADR</li>
<li>General Personal Litigation</li>
<li>Property and Private Client</li>
<li>Residential Property/ Real Estate Law</li>
<li>Commercial Property/ Real Estate Law</li>
<li>Wills Trusts and Administration of Estates</li>
<li>Buying Property in France</li>
<li>Employment Law</li>
<li>Family Law </li>
</ul>
<p>Please click on the links opposite for more details on the specific areas and our link below for details of our disclaimer.</p>
<!-- InstanceEndEditable --></div>
<div id="leftnavdiv">
<div id="leftnavouterdiv">
<div id="leftnavinnerdiv">
<p><b>Practice Areas</b><br />
Corporate/Commercial<br />
<a href="pages/corporate.html">Corporate</a><br />
<a href="pages/regandcom.html">Regulatory and Commercial</a><br />
<a href="pages/communicationsandutilities.html">Communications and Utilities</a><br />
<a href="pages/informationtech.html">Information Technology</a><br />
<a href="pages/technology.html">Technology and Electronics</a><br />
<a href="pages/ecommerce.html">e-Commerce</a><br />
<a href="pages/financialservices.html">Financial Services</a></p>
<p>
<b>Litigation</b><br />
<a href="pages/banking.html">Banking</a><br />
<a href="pages/insolvency.html">Insolvency, Bankruptcy and Corporate<br />
Recovery</a><br />
<a href="pages/commerciallitigation.html">Commercial Litigation, Arbitration<br />
and ADR</a><br />
<a href="pages/personallitigation.html">General Personal Litigation</a></p>
<p><b>Property and Private Client</b><br />
<a href="pages/residentialproperty.html">Residential Property/ Real Estate</a><br />
<a href="pages/commercialproperty.html">Commercial Property/ Real Estate</a><br />
<a href="pages/willsandtrusts.html">Wills Trusts and Administration<br />
of Estates</a><br />
<a href="pages/frenchproperty.html">Buying Property in France</a></p>
<p> <a href="pages/employment.html">Employment Law</a></p>
<p><a href="pages/familylaw.html">Family Law</a> </p>
</div>
</div>
<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>
<form action="http://search.atomz.com/search/" method="get" target="main">
<b>Search the Site<br />
</b>
<input name="sp-q" size="15" />
<input name="submit" type="submit" value="Go" />
<input name="sp-a" type="hidden" value="sp10023119" />
<input name="sp-f" type="hidden" value="ISO-8859-1" />
</form>
</div>
</div>
</div>
<div id="topnavdiv">
<ul>
<li><a href="/" id="buttonhome"><b>Home</b></a></li>
<li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>
<li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>
<li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>
<li><a href="news.html" id="buttonnews"><b>News</b></a></li>
<li><a href="people.html" id="buttonpeople"><b>People</b></a></li>
<li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>
</ul>
</div>
Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
Hey Guys, First post, ive been learning css for the last 6 months and finally been absolutely well and truly beaten by CSS! HELP! Basically the wordpress site ive been developing works fine in every browser accept for internet explorer 6 and 7. The navigation bar is out of position and theres a white square (guessing the background colour hasnt changed. (View the attached screen shot). There is also a problem with the side bar positioning but im guessing its just the same problem as the navigation so just need help fixing that. Feel free to crit my code as much as you like, im hear to learn Thanks, Tom Annotated screen shot of the problem: http://http://img254.imageshack.us/img254/807/helpcss.png Test site up at: http://www.justlovequotes.com/ Heres the css used for the header section: Code: #header {
float: left;
width: 100%;
height: 205px;
background: url(IMAGES/headerbg.jpg);
}
#headercontent {
width: 950px;
background:#FFF;
margin-left: auto;
margin-right: auto;
}
#logo {
float: left;
background:url(IMAGES/logo.jpg);
width: 406px;
height: 143px;
display: inline;
}
#headerrightbg {
width: 473px;
height: 144px;
background:url(IMAGES/headerrightbg.jpg);
float: right;
display: inline;
}
.search-form input {
width: 150px;
float: right;
}
#advert {
margin-top: 55px;
width: 468px;
height: 60px;
}
.headertext {
display: inline;
font-size:20px;
color:#CCC;
}
#menu-topnav {
margin-left: auto;
margin-right: auto;
width: 950px;
text-transform: uppercase;
font-family:"Tahoma",Arial, verdana;
font-size: 18px;
text-shadow: 0 1px 1px #ffffff, 0 -1px 1px #000000;
border: none;
}
#menu-topnav a {
display: block;
margin-top: -11px;
line-height: 3.333em;
padding: 0 0.7em;
text-decoration: none;
text-align: center;
color: #424242;
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
-o-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
#menu-topnav a:hover{
color:#ffffff;
}
#navcontainer li {
display: block;
float: left;
position: relative;
text-align: center;
border: none;
}
#menu-topnav li.current-menu-item a {
color: #FFF;
}
My HTML/PHP: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stunt Scooters - Buyer's Guide and Fan Site</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
</head>
<body>
<div id="header">
<div id="headercontent">
<a href="http://www.stunt-scooters.com"><div id="logo"></div> </a>
<div id="headerrightbg">
<div class="search-form">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<div id="adblock"> <div id="advert"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2791419469180970";
/* Newscootersiteheader */
google_ad_slot = "0329001251";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div> </div>
<?php
// DLOCC If URL is Homepage then do this...
$homepage = "/";
$currentpage = $_SERVER['REQUEST_URI'];
if($homepage==$currentpage):
?>
<h1 class="headertext"> Stunt Scooters - Buyers Guide And Fan Site</h1>
<?php else: ?>
<?php endif; ?>
</div>
</div>
<div id="navcontainer">
<?php
$walker = new My_Walker;
wp_nav_menu(array(
'theme_location' => 'primary-menu',
'walker' => $walker
));
?>
</div>
</div>
I'm trying to get a box to position properly. If you go to this page in firefox, it looks fine, but in IE7 and IE6 the centered image is nudged to the left by one pixel. You can see the white space to the right of the banner. When resizing the IE6/7 window, it sometimes jumps back to the right and into its proper position. Are there any specific methods in CSS that I should use for positioning this? Right now I'm just using this: Code: <div align="center"> <img src="banner.jpg"> </div> The CSS is validated. -The problem only occurs in the 1280x1024 resolution and above. Not in 768 by 1024. I'm sorry but this bothers me! - Thank you. |
|||||||