|
CSS - Css List Positioning Problem In Ie6/7
Hi guys,
I have a small list positioning problem in IE 6/7 which I was hoping someone might be able to advise me on! List Positioning is fine in Firefox, but for some reason is adding about 50px on the left margin in IE... I know my page isn't quite valid because of the sIFR bits I have on it, but I'm working on this too! The page in question is here Here's my list css code; #services_home_container { width: 265px; height: 274px; padding: 0px 0px 0px 0px; float: left; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 130%; } #services_home ul { list-style-type: none; width: 235px; padding: 0px 0px 0px 0px; } #services_home li { margin: 10px 0px 0px 0px; } #services_home li a { color: #4f2f9c; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 0px 0px 0px 0px; text-decoration: none; } * html #services_home li a { /* make hover effect work in IE */ width: 235px; } #services_home li a:hover { background: #bcfbc6; } #services_home a em { color: #666666; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%; width: 235px; padding: 5px 0px 5px 0px; } #services_home a span { color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%; } #services_home img { float: left; padding:2px 0px 2px 0px; margin: 0px 5px 0px 2px; border: none; } If anyone has a moment to take a look and help me, it would be very much appreciated! Best regards Jon Similar TutorialsHi, I'm using a list for a navigation bar where I have all the links with background images to give a rollover effect with images. However I want all the links to be inline and not on separate lines. Here is the problem page: http://www.mckr.ie/test.html (the blue navigation bar) Here is the HTML code on the page: Code: <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; }
Please can someone help me get them inline? Thanks in advance Hey all, can't seem to figure out what the deal is with this menu...looks fine in FF, but I can't seem to get the menu to line up with the background image in IE6. Here's what i've got; Code: <div id="header_bg"> <ul id="header_top"> <li><a href="index.php"><img src="images/menu_top.gif" alt="Windsor Harley Owners Group header image"></a></li> </ul> <ul id="menu_top"> <li id="leftspc"></li> <li id="links"><a href="links.php"></a></li> <li id="contact"><a href="contact.php"></a></li> <li id="news"><a href="newsletter.php"></a></li> <li id="home"><a href="index.php"></a></li> <li id="about"><a href="about.php"></a></li> <li id="events"><a href="events.php"></a></li> <li id="join"><a href="join.php"></a></li> <li id="pix"><a href="pix.php"></a></li> <li id="rightspc"></li> </ul> <ul id="header_bottom"> <li><img src="images/menu_bottomleft.gif" alt="Bottom Left spacer image"></li> <li id="admin"><a href="admin_login.php"></a></li> <li id="members"><a href="members.php"></a></li> <li><img src="images/menu_bottomright.gif" alt="Bottom right spacer image"></li> </ul> </div> <div class="clear"></div> and the CSS; Code:
#header_bg {
width:100%;
position:relative;
background:black url(images/header_bg.gif) repeat-x bottom;
height:166px;
}
/*
* html #header_bg {
height:156px;
}
*/
#header_top {
width:800px;
height:59px;
margin:auto;
list-style:none;
background-color:black;
}
/*#header_top li#logo {
width:800px;
height:59px;
margin:auto;
}*/
#menu_top {
position:relative;
margin:auto;
list-style:none;
height:71px;
width:800px;
background-color:transparent;
margin-top:-5px;
}
* html #menu_top {
padding-left:18px;
margin-top:-8px;
}
#menu_top li {
height:71px;
float:left;
}
#menu_top a {
text-decoration:none;
display:block;
height:71px;
}
#menu_top li#leftspc {
width:100px;
background:black url(images/menu_leftspc.gif) no-repeat;
}
#menu_top li#rightspc {
width:100px;
background:black url(images/menu_rtspc.gif) no-repeat;
}
/* LINK BUTTONS */
#menu_top li#links a { background-image:url(images/linksbut_off.jpg); }
#menu_top li#links a:hover { background:transparent; }
#menu_top li#links { background-image:url(images/linksbut_roll.jpg); width:75px; }
/* CONTACT BUTTONS */
#menu_top li#contact a { background-image:url(images/contactbut_off.jpg); }
#menu_top li#contact a:hover { background:transparent; }
#menu_top li#contact { background-image:url(images/contactbut_roll.jpg); width:75px; }
/* NEWS BUTTONS */
#menu_top li#news a { background-image:url(images/newsbut_off.jpg); }
#menu_top li#news a:hover { background:transparent; }
#menu_top li#news { background-image:url(images/newsbut_roll.jpg); width:75px; }
/* HOME BUTTONS */
#menu_top li#home a { background-image:url(images/homebut_off.jpg); }
#menu_top li#home a:hover { background:transparent; }
#menu_top li#home { background-image:url(images/homebut_roll.jpg); width:75px; }
/* ABOUT BUTTONS */
#menu_top li#about a { background-image:url(images/aboutbut_off.jpg); }
#menu_top li#about a:hover { background:transparent; }
#menu_top li#about { background-image:url(images/aboutbut_roll.jpg); width:75px; }
/* EVENTS BUTTONS */
#menu_top li#events a { background-image:url(images/eventsbut_off.jpg); }
#menu_top li#events a:hover { background:transparent; }
#menu_top li#events { background-image:url(images/eventsbut_roll.jpg); width:75px; }
/* JOIN BUTTONS */
#menu_top li#join a { background-image:url(images/joinbut_off.jpg); }
#menu_top li#join a:hover { background:transparent; }
#menu_top li#join { background-image:url(images/joinbut_roll.jpg); width:75px; }
/* PIX BUTTONS */
#menu_top li#pix a { background-image:url(images/pixbut_off.jpg); }
#menu_top li#pix a:hover { background:transparent; }
#menu_top li#pix { background-image:url(images/pixbut_roll.jpg); width:75px; }
#header_bottom {
width:600px;
height:35px;
margin:auto;
margin-top:-5px;
background-color:transparent;
}
* html #header_bottom {
padding-left:18px;
margin-top:-4px;
}
#header_bottom li {
float:left;
height:35px;
list-style:none;
}
#header_bottom a {
text-decoration:none;
display:block;
height:35px;
}
/* admin BUTTONS */
#header_bottom li#admin a{
background-image:url(images/admin_button_off.gif);
}
#header_bottom li#admin a:hover {
background:transparent;
}
#header_bottom li#admin {
background-image:url(images/admin_button_roll.gif);
width:150px;
}
/* members BUTTONS */
#header_bottom li#members a{
background-image:url(images/members_button_off.gif);
}
#header_bottom li#members a:hover {
background:transparent;
}
#header_bottom li#members {
background-image:url(images/members_button_roll.gif);
width:150px;
}
Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out? Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!) Code snippet is posted below. Cheers. from stylesheet: .bulletList li { margin-bottom: 1.5em; padding-left: 0.75em; list-style-image:url(../images/hsdmini.jpg); color: #547A98; } from page: <table width="100%" > <tr> <td align="left"> <ul class="bulletList"><strong> <li>Credit cards accepted</li> <li>Cheques accepted</li> <li>Delivery to europe</li> <li>40,000 products in store!</li> </strong> </ul> </td> </tr> </table> OK, I'm back for another CSS lesson - this time on lists. My site is designed with typical three-column layout. The left and right columns are floated and the center column contains most of my content. Sometimes in the center column of a page I want to include a list, either ordered or unordered. This page is a splendid example: http://stallinswebdesign.com/vs/general_OfficersContactInfo.php. I do not yet know how to manipulate the positioning of a list (and lots of other block-level things, truth be told). 1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to the left a wee bit so that it lies about 1em to the right of that left border? 2. Can you share with me a CSS standards-based technique for marking up the first element of a list so that it is left-adjusted and all of the following list elements are indented from it (and I can adjust the amount of indentation), so the list looks like this: Code:
My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
every cyclist knows that orange and black are the fastest colors
any bike that wins Frame of the Year and Bike of the Year is a winner
the frame stiffness is top-shelf, and the power transfer is amazing
Or, if one can do that with semantic markup other than lists, please let me know. Thank you all for looking; I appreciate your effort. Hello, I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a 1.) IE won't resize the font size that I need to display my navigation bar correctly 2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html Here is the HTML HTML Code: <html> <head> <title>Title</title> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styletest.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="container"> <div id="top"></div> <div id="bod"> <div id="wrapHeader"> <div class="headerLeft"></div> <div class="headerRight"><p>Call Now 888-467-6650</p></div> </div> <div id="navWrap"> <ul id="navigation"> <li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link </a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Information & Insurance Resource Center</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a></li> </ul> </div> <div id="contentMain"> <h2>Welcome to Independent Agents Online!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p> </div> <div id="wrapColumn"> <div id="columnLeft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. <center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center> </div> <div id="columnMid"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. </div> <div id="columnRight"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. </div> </div> </div> <div id="bottom"></div> <div id="footer">Site Map LegalAbout Us</p></div> </div> </div> </body> </html> Here is the CSS http://www.kyjocro.com/IAO/styletest.css Code:
body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FF0000; padding: 4px; padding-left: 0px; text-align:center;}
img { border:none;}
/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}
/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px; height:128px; background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px; float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px; float:left; background:url(images/headerRight.jpg) no-repeat; height:128px;}
.headerRight p{ font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#FF0000; padding:60px 0 0 100px;}
/*Navigation Bar Code*/
#navWrap {margin: 0 auto; width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak p {line-height: 3px;}
/*Main Body*/
#contentMain {margin: 0px auto; width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}
/*COLUMN WRAPPER AND DIVS */
#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}
#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}
#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}
I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples. Much thanks in advance Is it possible to adjust the alignment of list-style-image's? In IE, the image ends up being too high, but it's centered properly in Firefox. Example: URL Hi I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example http://dmumford.bizhat.com/test/list.htm I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense. Could someone please help me! Thank you! 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 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 have a page with a number of thumbnails, each displayed individually in a DIV. The thumbnails (DIVs) are grouped in a few sections. Please have a look at this page. Resize the browser width and see what happens to the last row of images in each section. Some do align left as they should, but some do align right. Can anybody explain to me why this is happening. Or better still, what I should do about it? Oh yes, I use this stylesheet: Code:
a : link, a : active, a : visited {
text-decoration : underline;
background : transparent;
}
a : hover {
text-decoration : underline overline;
background : transparent;
}
body {
background: #FFF url(Background.gif);
font: normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
text-align: left;
margin: 0px 0px 0px 0px;
}
div.programmers {
float : left;
width : 150px;
margin: 0px 8px 15px 8px;
text-align : center;
}
div.spacer {
clear : both;
}
h1 {
font: normal 16px/30px Trebuchet MS, Tahoma, Verdana, Arial;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
h1.phw {
background-image : url(xp-phw.png);
}
.plaintekst {
background : transparent;
font : normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration : none;
color : #000;
}
.plaintekst p {
margin-bottom: 15px;
}
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! On the bottom of the following page, there is a video player and playlist. It appears just fine when opened with Firefox but when I tested the page in IE 8, black box on the left positioned on the upper box. http://www.pangeaadvisors.org/default.asp Hi, I have a navigation bar which is divided into 2 columns along the top of my page at http://www.smartglassinternational.com It looks fine in IE7 and Opera but on IE6 one of the columns gets moved down, probably because of the different way IE6 interprets CSS. Anyone know how to fix this please? Here's my HTML code: Code: <div id="navdiv"> <div id="navdivleft"><a href="/" id="buttonhome"><b>Homepage</b></a> <a href="../news.html" id="buttonnews"><b>Company News</b></a> <a href="../about.html" id="buttonabout"><b>About Us</b></a> <a href="../contact.html" id="buttoncontact"><b>Contact Us</b></a></div> <div id="navdivright"><a href="../projects.html" id="buttonprojects"><b>Completed Projects</b></a> <a href="../ec-smartglass.html" id="buttonec"><b>EC SmartGlass</b></a> <a href="../lc-smartglass.html" id="buttonlc"><b>LC SmartGlass</b></a> <a href="../faq.html" id="buttonfaq"><b>FAQ</b></a></div> </div> My CSS file is at http://www.smartglassinternational.com/style.css If anyone could point be in the right direction for fixing this problem I'd be very grateful Thanks in advance... Firefox is not positioning divs ifrVerse and ifrVerse2 side-by-side. I see ifrVerse2 outside the div main_table Code: <div id="main_table" style="border: 1px solid rgb(124, 124, 124); float: left; background-color: rgb(181, 162, 111); width: 645px; height: 770px; text-align: center;"> <div name="ifrVerse" id="ifrVerse" style="border: 1px solid rgb(181, 162, 111); margin: 5px 0px 5px 5px; float: left; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <div style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="selbook" size="5" onchange="fillChapters();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="seltext" style="border: 1px solid black; text-align: center; background-color: rgb(210, 197, 160); height: 440px;"></div> </div> </div> <div name="ifrVerse2" id="ifrVerse2" style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: right; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <form name="myForm" id="myForm" action="" method="get"> <div style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="book2" size="5" onchange="fillChapters2();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="text" style="padding: 10px; width: 50px; height: 440px;"></div> </form> </div> 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 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 am having trouble positioning two <div> elements on my page, I need them to sit in the bottom right and left corners of the page but they only seem to want to sit in the corners of the page when it is first loaded and the window is maximised. The page can be viewed at http://sirgdissertation.zzl.org and the css for the two divs is as follows: Code: #bottomBarLeft {
position:absolute;
bottom:0%;
left:0%;
right:50%;
width:50%;
height:auto;
text-align:left;
font-size:9px;
}
#bottomBarRight {
position:absolute;
bottom:0%;
left:50%;
right:0%;
width:50%;
height:auto;
text-align:right;
font-size:12px;
}
can someone suggest how I could alter the code to fix my problem? Ignore the red lines around the info in the middle at the moment, they are just there for position editing purposes. I have checked my page in Google Chrome, IE8 and Firefox 3.6 and still the same result. As a sidenote, IE8 also doesn't seem to want to display the home page properly, I don't know if it has something to do with the fact that it is a php page or something else - if someone could direct me to the appropriate board for this then I'll post this sidenote there!! Hello, If you go to http://www.tickledpinkcookbook.com/webc.html and view it in Firefox you will see the bottom two images are floating too far to the right. In IE it's fine. Anyone know how to fix this? thanks |
|||||||