|
CSS - Links Acting Strange In Ie
I've created a stripped down version of the page he
http://www.brovizion.com/testlabaudrey I want the navbar to work in ie the same way it does in firefox. Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testlab Audrey</title>
<link href="stylesheets/brolayout.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/brostyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="outerwrapper">
<div id="header">
<div id="title">
<h1>Testlab Audrey</h1>
</div>
<div id="title_image">
</div>
</div>
<div id="wrapper">
<div id="navigation">
<ul id="menu">
<li class="current_page_item"><a class="first_menu" href="#">link01</a></li>
<li class="page_item"><a href="#" title="design">link02</a></li>
<li class="page_item"><a href="#" title="development">link03</a></li>
<li class="page_item"><a href="#" title="marketing">link04</a></li>
<li class="page_item"><a href="#" title="hosting">link05</a></li>
<li class="last_menu"><a class="last_menu" href="#">link06</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the first CSS file (layout): Code: * {
margin: 0;
padding: 0;
}
#page {
text-align: center;
background: url(../images/page_bg.gif) center #7F7F7F repeat-y;
}
#outerwrapper {
width: 800px;
margin: 0 auto;
}
#header {
width: 800px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
padding: 0;
}
#wrapper {
width: 780px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
margin-left: 11px;
padding: 0px;
text-align: left;
}
#navigation {
margin: 0;
padding: 0;
background-color: #FFCC99;
}
#content {
width: 510px;
margin: 0;
margin-left: 5px;
padding: 0;
float: left;
background: #FFFFFF;
}
#sidebar {
width: 240px;
margin: 0;
margin-right: 5px;
padding: 0;
float: right;
background-color: #FFFFFF;
}
#footer {
width: 800px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
background: url(../images/page_bottom.gif) bottom center transparent no-repeat;
padding-top: 5px;
padding-bottom: 15px;
}
Here is the second CSS file (everything else): Code: /* Basic Styles
-----------------------------------------------------------------------------*/
body {
font-size : 90%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}
hr {
display: none;
clear: both;
}
h1 {
}
h2 {
}
p {
}
a {
color: #515151;
text-decoration: none;
}
a img {
border: 0 none;
}
/* Advanced Styles (by area)
-----------------------------------------------------------------------------*/
/*------HEADER------*/
#title {
background: url(../images/header.gif) top #7F7F7F no-repeat;
height: 76px;
margin: 0;
padding-left: 25px;
clear: both;
text-align: left;
}
#title h1 {
color: #c9e45a;
padding-top: 25px;
font-size: 3em;
letter-spacing: -.1em;
}
#title_image {
margin: 0;
text-align: left;
display: block;
height: 95px;
background: url(../images/header_image6.jpg) center center transparent repeat-y;
}
/*------NAVIGATION------*/
#navigation {
}
#menu {
list-style-type: none;
background: url(../images/menu_bg.gif) 50% 0 #515151 repeat-x;
margin: 0;
padding: 0;
height: 80px;
width: 780px;
border-top: 1px solid #FFFFFF;
overflow: hidden;
}
#menu li {
background: none;
padding: 0;
display: table-row;
vertical-align: middle;
float: left;
height: 80px;
}
#menu li.last_menu {
float: right;
}
#menu li a {
color: #FFFFFF;
line-height: normal !important;
line-height: 80px;
display: table-cell;
vertical-align: middle;
height: 80px;
padding: 0 10px 0 10px;
background: url(../images/menu_triple_lightblue.gif) top left transparent repeat-x;
}
#menu li a:hover, #menu li a:active {
background-position: center left;
color: #FFFFFF !important;
}
#menu li.current_page_item a {
background-position: bottom left !important;
color:#1F3700 !important;
}
#menu li a.first_menu {
padding-left: 35px;
background-repeat: no-repeat;
background-image: url(../images/menu_start_triple_lightblue.gif);
}
#menu li a.last_menu {
padding-right: 35px;
background-repeat: no-repeat;
background-image: url(../images/menu_end_triple_lightblue.gif);
background-position: top right;
}
#menu li a.last_menu:hover, #menu li a.last_menu:active {
background-position: center right;
}
#menu li.current_page_item a.last_menu {
background-position: bottom right !important;
}
/* Basic Lists
-----------------------------------------------------------------------------*/
ul, ol {
list-style-type: none;
list-style-position: outside;
padding: 0;
margin: .2em 0 .2em 0;
}
ul li, ol li {
background: transparent url(../images/puce.png) 2px .4em no-repeat;
padding-left: 15px;
}
ul ul li, ol ol li {
background: transparent url(../images/bullet.gif) 0px .5em no-repeat;
padding-left: 8px;
}
/* Advanced Lists
-----------------------------------------------------------------------------*/
#content ol li {
list-style-type: decimal;
list-style-position: inside;
background: transparent;
padding-left: 0;
}
#content ol li li {
padding-left: 2em;
}
Similar TutorialsHi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian On my test website that i make designs on I am having a very strange problem with the styles of my links. i am trying to change the style of the title for the posts to have a blue color and the turn light blue on hover. however i have this problem where I change the style on the title, and there are also random links in the sidebar that follow that style as well. i dont know if it is bug or what, but is begining to give me a headache. Right now i colored the links pink so that are easy to see. This happens in both opera and firefox for me. the url is nverted.net Hi All, I have created a site in pure html and one of very strange behaviour i have ever seen is blue lines just like the a href links are coming ,Please can any one help there.They come on site first time and again on refresh they got disappear and its coming on Mozilla firefox and netscape not on IE. Site name: http://tedje.com/ Thanks in advance or any suggestion. I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? Hi all see here http://www.gaming4linux.com/index.php On the top bit for "latest news" there is a space below the background where the border is on windows, but on linux there isn't, any ideas? Hello, I'm about to go absolutely crazy; I just can't seem to get a grasp on laying out a simple webpage with css. So I have this div container, #main, and in it I want two more div's left and right. I set the margin-top:20px on the left div and that works fine. Then I set the margin-top:20px on the right div and I get a 40px margin-top on the left and 20px margin-top on the right. The frustrating thing is that dreamweaver displays it the way I want to but chrome, IE, and opera do not. html4strict Code: Original - html4strict 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>Untitled Document</title> <link href="global.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"></div> <div id="nav"> </div> <!-- #main is a wrapper for the page content --> <div id="main"> <div id="maincontent">this is a test </div> <div id="sideright"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> css Code: Original - css Code @charset "utf-8"; /* CSS Document */ body { background-color:#063; margin: 0; padding: 0; text-align: center; } #wrapper { text-align: left; width: 860px; height: 600px; border: solid #000 3px; background-color:#693; margin-top: 5px; margin-right: auto; margin-left: auto; } #banner { width: 860px; height: 120px; background-image: url(images/banner860120.jpg); } #nav { width: 860px; height: 34px; background-color:#663; } #main { width: 860px; height: 446px; } #maincontent { margin-top: 20px; float: left; margin-left: 20px; background-color:#663; width: 500px; height: 380px; border: 4px double #FFF; color: #FFF; } #sideright { margin-top: 20px; margin-left: 540px; width: 300px; height: 380px; background-color: #663; } @charset "utf-8"; I know this code is likely sloppy, but apparently it passed the css validation . I would be very grateful if someone could help me out. I'm slightly new at CSS, but I've typed out the following code to set up my site. Code:
body { margin: 0px 0px 0px 0px;
}
a:link { font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
}
a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
color:purple;
background-color: white}
#leftcontent {
position: absolute;
left: 0px;
top:auto;
width: 144px;
background-color: #9E1817;
border: 0px;
height: 100%;
}
#centercontent { top:auto;
background:white;
margin-left:145px;
margin-right:-1px;
border:0px;
width: 784px;
}
#banner { background:lavender;
height:138px;
border-top:0 solid darkblue;
border-right:0 solid darkblue;
border-left:0 solid darkblue;
margin: 0px 0px 0px 0px;
}
p { margin:0px 10px 10px 10px;
}
#copyright { border-top-color:#990000;
border-top-style:dashed;
border-top-width: 1px;
width: 100%;
position:absolute;
bottom: 20px;
}
My problem is that the 'leftcontent' div is overflowing, and I want it to only do so when the content has to overflow. My copyright div is also acting screwy (I think because of the leftcontent not acting properly). It is setting itself 20 pixels from the bottom, but just the visible area upon first viewing the page. The overflow makes it sit more like 150px fro mthe bottom. Any ideas on how to rid myself of the overflow problems? I've tried overflow:hidden, but it didn't exactly work. I would first like to say that I'm a noob to PHP. The problem that I am having is with my picture viewer. When you click on the thumbs, they show above in the main image viewer. The problem is that it is displaying the thumbnail instead of resizing the original image to fit the main image spot. When you click on the main image, the original pic is to be displayed in a lightbox. How do I go about fixing this issue? Thanks in advance for those who help! Code: http://conceptsinmotion.net/store/store?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=17 PHP Code: <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?> <?php echo $buttons_header // The PDF, Email and Print buttons ?> <?php if( $this->get_cfg( 'showPathway' )) { echo "<div class=\"pathway\">$navigation_pathway</div>"; } if( $this->get_cfg( 'product_navigation', 1 )) { if( !empty( $previous_product )) { echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>'; } if( !empty( $next_product )) { echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>'; } } ?> <br style="clear:both;" /><center> <table border="0" style="width: 100%;margin-left: auto;margin-right: auto;"> <tbody> <tr align="right"> <td colspan="3" align="center"> <?php if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?> <div id="parent_img"><?php echo $product_image ?></div> <br/><br/> <?php if (count($images)): foreach ($images as $image){$curentwidth += $image->file_image_thumb_width;}?> <script type="text/javascript"> iens6=document.all||document.getElementById ns4=document.layers var speed=5 </script> <div id="scroll" style="margin-left: auto;margin-right: auto;"> <div class="box-left" style="width: 15px; float: left;margin:10px 0px 0px 0px"><a class="mouseover_left" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/prev.png';?>" alt="" border="0" /></a></div> <span class="box-right" style="float: right;margin:10px 0px 0px 0px"><a class="mouseover_right" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/next.png';?>" alt="" border="0" /></a></span> <div id="container" style="overflow: hidden; width: 50%; position: relative; height: 55px;float:center"> <div id="child" style="position: absolute; width: <?php echo $curentwidth;?>px; left: 0pt; top: 0pt;"> <ilayer name="nscontainer"> <layer name="nscontent" visibility="hidden"> <?php echo $this->vmlistAdditionalImages( $product_id, $images )?> </layer> </ilayer> </div> </div> <div class="box-right" style="float: right;margin:10px 0px 0px 0px"></div> </div> <script language="JavaScript1.2"> if (iens6){ var crossobj=document.getElementById? document.getElementById("child") : document.all.content var contentheight=crossobj.offsetWidth } else if (ns4){ var crossobj=document.nscontainer.document.nscontent var contentheight=crossobj.clip.width } function movedown(){ if (iens6&&parseInt(crossobj.style.left)>=<?php echo 64*count($images)*(-1)/5-32;?>) crossobj.style.left=parseInt(crossobj.style.left)-speed+"px" else if (ns4&&crossobj.left>=<?php echo 64*count($images)*(-1)/5-32;?>) crossobj.left-=speed movedownvar=setTimeout("movedown()",50) } function moveup(){ if (iens6&&parseInt(crossobj.style.left)<=0) crossobj.style.left=parseInt(crossobj.style.left)+speed+"px" else if (ns4&&crossobj.left<=0) crossobj.left+=speed moveupvar=setTimeout("moveup()",50) } function getcontent_height(){ if (iens6) contentheight=crossobj.offsetWidth else if (ns4) document.nscontainer.document.nscontent.visibility="show" } window.onload=getcontent_height </script> </td> <style type="text/css"> ul.box li{float:left;list-style:none;padding-left:0 !important} ul.box{width:100%;margin:0px;padding:0px;} li:hover img{opacity:1} </style> <script type="text/javascript"> function show_img(url) { var output1 = window.document.getElementById('curent').href=url; var output2 = window.document.getElementById('img_preview').src=url; return true; } </script> <?php endif;?><br /><br /> </tr> <tr align="right"> <td rowspan="1" colspan="3" align="right"> <h1 style="margin-left: auto;margin-right: auto;"><?php echo $product_name ?> <?php echo $edit_link ?></h1> </td> </tr> <?php if( $this->get_cfg('showManufacturerLink')) { ?> <tr align="center"> <td rowspan="1" colspan="3"><?php echo $manufacturer_link ?><br /></td> </tr> <tr align="center"> <td colspan="3"> </td> </tr> <?php } ?> <tr align="right"> <td colspan="3" align="center" valign="top"> <?php echo $product_price_lbl ?> <?php echo $product_price ?><br /></td> </tr> <tr align="right"> <td colspan="3" align="center" valign="top"><?php echo $product_packaging ?><br /></td> </tr> <tr align="center"> <td colspan="3"><?php echo $ask_seller ?></td> </tr> <tr id="browseProductDescription"> <td colspan="3" rowspan="1" align="center"><hr /> <?php echo $product_description ?><br/> <span style="font-style: italic;"><?php echo $file_list ?></span> </td> </tr> <tr align="left"> <td width="16%" align="left"><?php if( $this->get_cfg( 'showAvailability' )) { echo $product_availability; } ?><br /> </td> <td width="17%" align="right"><?php echo $addtocart ?></td> </tr> <tr align="center"> <td colspan="4"><?php echo $product_type ?></td> </tr> <tr align="center"> <td colspan="4"><hr /><?php echo $product_reviews ?></td> </tr> <tr align="center"> <td colspan="4"><?php echo $product_reviewform ?><br /></td> </tr> <tr align="center"> <td colspan="4"><?php echo $related_products ?><br /> </td> </tr> <?php if( $this->get_cfg('showVendorLink')) { ?> <tr align="center"> <td colspan="4"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td> </tr> <?php } ?> </tbody> </table></center> <?php if( !empty( $recent_products )) { ?> <div class="vmRecent"> <?php echo $recent_products; ?> </div> <?php } if( !empty( $navigation_childlist )) { ?> <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br /> <?php echo $navigation_childlist ?><br style="clear:both"/> <?php } ?> Code:
/**
* Main CSS file for the "black color" theme for VirtueMart
* @copyright 2006-2008 soeren
* @colortheme (C) 2008 gtwillemsen - surpass.nl
* @license GNU/GPL
*
*/
/* General Shop Styles here please */
.addtocart_button, .notify_button {
text-align:center;
background-position:bottom left;
width:160px;height:30px;
cursor:pointer;
border: none;
font-weight:bold;
font-family:inherit;
color: #ffffff;
vertical-align: middle;
overflow:hidden;
}
.addtocart_button {
background: url( 'images/add-to-cart.png' ) no-repeat center transparent;
}
.notify_button {
background: url( 'images/notify.png' ) no-repeat center transparent;
}
.addtocart_button_module {
text-align:center;
background-position:bottom left;
width:160px;height:30px;
cursor:pointer;
color: #ffffff;
border: none;
font-weight:bold;
font-family:inherit;
background: url( 'images/transparent.png' ) no-repeat center transparent;
vertical-align: middle;
overflow:hidden;
}
input.addtocart_button_module:hover {
color: #333333;
}
.addtocart_form {
width: 100%;
display: inline;
white-space: nowrap;
}
/* The quantity box beneath the "add to cart" button */
.quantity_box {
vertical-align: middle;
}
.quantity_box_button {
width:10px;
vertical-align:middle;
height:10px;
background-repeat: no-repeat;
background-position: center;
}
.quantity_box_button_down {
background-image: url(images/down_small.png);
}
.quantity_box_button_up {
background-image: url(images/up_small.png);
}
.continue_link, .checkout_link {
margin: 2px;
padding: 2px 0px 2px 40px;
vertical-align: middle;
font-weight: bold;
font-size: 1.4em;
width: 40%;
}
.checkout_link {
margin-left: 40px;
background: url( 'images/forward.png' ) no-repeat left;
}
.continue_link {
background: url( 'images/back.png' ) no-repeat left;
}
.next_page {
background: url( 'images/next_16x16.png' ) no-repeat right;
padding-right: 30px;
line-height: 20px;
float: right;
width: auto;
}
.previous_page {
background: url( 'images/previous_16x16.png' ) no-repeat left;
padding-left: 30px;
line-height: 20px;
float: left;
width: auto;
}
/* This is the text box informing customers about your returns policy */
.legalinfo {
background: #cccccc;
border: 2px solid gray;
margin: 10px;
padding: 0px 0px 10px 10px;
}
div.pathway {
margin-bottom: 1em;
}
div.pathway img {
padding: 0 2px;
}
/* The PDF, Email and Print buttons */
div.buttons_heading {
margin:10px;
width:10%;
float:right;
}
.productPrice {
font-weight:bold;
white-space: nowrap;
}
.product-Old-Price {
color:red;
text-decoration:line-through;
}
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
width:100%;
padding: 3px 3px 3px 3px;
vertical-align: top;
}
.browseProductTitle {
font-size: 16px;
font-weight: bold;
padding: 3px;
margin-top: 3px;
width: 30%;
float: left;
}
.browseProductImageContainer {
float: left;
width: auto;
margin: 3px;
}
.browseProductImageContainer {
margin: 3px;
float: left;
height:130px;
width:120px;
}
.browseProductDetailsContainer {
float: left;
width: 70%;
}
.browseProductDescription {
margin-top: 40px;
width:40%;
}
.browsePriceContainer {
float: left;
margin: 5px;
width:20%;
}
.browseAddToCartContainer {
width:30%;
text-align:center
}
.browseRatingContainer {
float: left;
width:25%;
margin: 3px;
white-space: nowrap;
}
/** Flypage Styles **/
.thumbnailListContainer {
text-align: center;
width: 200px;
height: 200px;
overflow: auto;
}
/*
General Form Styling
*/
.formLabel {
float:left;
width:30%;
text-align:right;
font-weight: bold;
margin: 2px;
white-space: nowrap;
clear: left;
vertical-align: middle;
margin-top: 8px;
}
#agreed_div {
white-space: normal;
}
.formField {
float:left;
width:60%;
margin: 2px;
vertical-align: middle;
margin-top: 8px;
}
.missing {
color:red;
font-weight:bold;
}
/**
* Administration Styles
*/
.adminListHeader {
float:left; height: 48px; background-repeat: no-repeat;
text-align: left; font-size: 18px; font-weight: bold;
padding-left: 80px;
}
.labelcell {
margin-left: auto;
font-weight: bold;
vertical-align: top;
width: 30%;
}
table.adminform td.labelcell {
text-align: right;
}
.iconcell {
vertical-align: top;
width: 5%;
}
.shop_error, .shop_warning, .shop_info, .shop_debug, .shop_critical, .shop_tip {
background-color:#FAFAD2;
background-position:left 5px;
background-repeat:no-repeat;
border-color:#AACCAA;
border-style:dotted none;
border-width:1px 0pt;
font-weight: 900;
margin:1pt 1pt 1em 1em;
padding:0.5em 1em 1.5em 48px;
}
.shop_error {
background-image: url( images/error.png );
}
.shop_warning {
background-image: url( images/warning.png );
}
.shop_info, .shop_tip {
background-image: url( images/info.png );
}
.shop_debug {
background-image: url( images/log_debug.png );
}
.shop_critical {
font-weight: bold;
background-image: url( images/log_critical.png );
}
/**
* Addtocart detail Styles
*/
.vmCartContainer { /* Cart Container */
width: auto;
float: right;
background: #cccccc;
border: 1px solid #000;
padding: 3px;
}
.vmCartChildHeading { /* Header for the cart */
font-size: 14px;
font-weight: bold;
padding-bottom: 3px;
text-align: left;
}
.vmCartChild { /* Container for the Child Product */
vertical-align: middle;
border: 1px solid #000;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
float:left;
}
.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
}
.vmCartChildElement { /* Individual element styling */
width: 100%;
vertical-align: middle ;
height: 25px;
text-align: left;
}
.vmCartAttributes { /* Attributes Div*/
margin-top:8px;
width:100%;
}
.vmAttribChildDetail { /* Product Attributes Styling */
}
.vmMultiple {
height:35px;
}
.vmChildType { /* Product type div*/
width: 100%;
}
.vmClearDetail { /*Clear the divs afer child types*/
clear: both;
}
.vmClearAttribs { /*Clear the divs before the attributes*/
clear:both;
}
.vmRowOne { /* Odd Row One styling */
background: #cccccc;
}
.vmRowTwo { /* Even Row Styling */
background: white;
}
/* Link Details for link to child*/
.vmChildDetail a, .vmChildDetail a:link {
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmChildDetail a:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
/* Styling for the form elements to enable correct Line Up */
.inputboxquantity {
margin-top: 3px;
vertical-align: middle;
}
.availabilityHeader {
text-decoration:underline;
font-weight:bold;
}
.inputboxattrib {
float: left;
margin-top: 0px;
vertical-align: middle;
margin-bottom: 2px;
}
.quantitycheckbox {
margin-top: 6px;
vertical-align: middle;
}
/**
* Addtocart detail Styles for placing attributes beside product_types
*/
.vmCartContainer_2up { /* Cart Container */
width: 100%;
float: left;
background: #cccccc;
border: 1px solid #000;
padding: 3px;
}
.vmCartChildHeading_2up { /* Header for the cart */
font-size: 14px;
font-weight: bold;
padding-bottom: 3px;
text-align: left;
}
.vmCartChild_2up { /* Container for the Child Product */
vertical-align: middle;
border: 1px solid #000;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
float:left;
}
.vmChildDetail_2up { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
}
.vmCartChildElement_2up { /* Individual element styling */
width: 100%;
vertical-align: middle ;
height: 25px;
text-align: left;
}
.vmCartAttributes_2up { /* Attributes Div*/
float: left;
padding: 0px 5px 5px 5px;
margin: 0px 5px 5px 5px;
width:50%;
}
.vmAttribChildDetail_2up { /* Product Attributes Styling */
}
.vmMultiple {
height:35px;
}
.vmChildType_2up { /* Product type div*/
background: #cccccc;
padding: 0px 5px 5px 5px;
margin: 0px 5px 5px 5px;
float: left;
width: 40%;
border: 1px solid #000;
}
.vmClearDetail_2up { /*Clear the divs afer child types*/
}
.vmClearAttribs_2up { /*Clear the divs before the attributes*/
clear:both;
}
.vmRowOne_2up { /* Odd Row One styling */
background: #cccccc;
}
.vmRowTwo_2up { /* Even Row Styling */
background: white;
}
/* Link Details for link to child*/
.vmChildDetail_2up a, .vmChildDetail_2up a:link {
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmChildDetail_2up a:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
.vmCartModuleList {
cursor : pointer;
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmCartModuleList:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
.vmquote {
margin: 4px;
border: 1px solid #cccccc;
background-color: #E9ECEF;
padding: 10px;
font-size: 12px;
color: #254D78;
}
.editable {
background: #ffff33;
cursor: pointer;
}
ul.pagination li {
padding: 2px 1px;
display: inline;
background: none;
}
.hr {
clear:both;
border:1px solid #FFFFFF;
height:1px;
width:100%;
text-align:left;
}
.hr_div {
height:10px;
width:100%;
}
.clr {
clear: both;
overflow:hidden;
}
.box img, #child ul li a img {
height:48px;
margin:0 2px 0 0;
width:64px;
}
#parent_img {width: 325px; height: 221px; margin-left: auto; margin-right: auto;}
#parent_img a {text-decoration: none;}
#parent_img a img {width: 325px; height: 221px}
Hi, I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css) Code: 1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html 2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on? so I have a <h2> tag within a <div id="content"> tag, and I want the h2 tag to be about 115px from the top of the content div. Yet everytime I set the margin, it pushes both the <h2> tag AND the <div id="content"> tag down by 115px. Here's my CSS code: #content{ background: #bd1f1f url("images/body_bkgrnd.jpg"); } #content h2{ font: 34px/30px Helvetica; color: black; margin: 115px 0px 0px 0px; width: 544px; } And here's the relevant HTML: <div id="content"> <h2> Great themes, amazing icons, and the best kit of templates. </h2> </div> <!-- end content --> And here's a picture to show what I mean: [IMG]C:\question.jpg[/IMG] Thanks guys! Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
i have the following CSS Code:
#logoOuter{
width:155px;
height:90px;
background-color:#336699;
position:relative;
float:left;
}
#logo{
bottom:0px;
position:absolute;
}
html>body #logo{
margin-bottom:-5px;
}
#globalNavOuter{
margin-left:155px;
background-color:#00CC99;
}
#globalNavTop{
height:19px;
}
#globalNavBottom{
height:71px;
}
and this XHTML Code: <div id="header" > <div id="logoOuter"> <div id="logo"> <img src="images/logo.gif" border="0" /> </div> </div> <div id="globalNavOuter"> <div id="globalNavTop">globla Nav Top</div> <div id="globalNavBottom">global nav bottom</div> </div> </div> The problem is there was a 5px gap at the bottom of the image in moz/FF and in IE when i took the whitespace out (the CR's) of the html the space went away in IE bot not MOZ/FF so i added a -5px margin to the bottom of that div and that did the trick in FF but it over did it in IE thus the sub selector > hack. [EDIT] I just took the image away and that fixes it. So it looks like it's the image causing it. doing a - vertical alignment seems to fix it but I still dont understand why... Gary perhaps you can explain this to me...i just dont get it Some days tables just seem so much easier........ I have learned a lesson, To look in F.F as well as I.E6 to make sure all layout is showing as it should be, it is to a point. I had three errors when I looked in validator. Learned also yesterday that there is also CSS validator heaven forbid. I had this random image script that shows all images in posts. The link colors are what were different in F.F. Right color iin I.E. I have took that out now because when it showed images from the posts and the sidebar randomly the image over shot the sidebar when it shows both same images as the script found the posted images. I may have the answer to that by another random image to pull from a directory instead. On the F.F last year I had a site that had 100 errors lol so I wanted to check everything as I go this time around. If anyone has Opera please could they check out my Wordpress please? My link is in my profile as I saw yesterday there are rules about links with good reason. S how come the border was different color in F.F thats my question? Thanks! http://www.wwu.edu/~swing/newswingsite/index.html I'm relatively new at this, but I've been trying my hardest to learn how to do all of this while conforming to web standards. I've got my page looking almost (see below) like I want it to in Firefox, but in IE I get these ugly gaps. I used to get them in the inset box too, but I figured out a way to make them go away. I can't figure out how to make it go away in the header though. So my questions, so that I can actually learn something here, are these: What causes that big gap? How do I get rid of it? Is there a better/cleaner/simpler way to style the inset box so as to avoid the gaps? Also, you can see that there's one pixel missing in the gold border. That's from the blue top border so as to blend the rounded top border gif. Is there an easier way to add the rounded top? When I simply had no top border, things got screwy. Thank's for any help/insight you can give! now, i'm posting this after i've scoured the forum here and i have yet to find a posted resolution. The problem i'm having is pushing the footer to the bottom of the page, as opposed to the bottom of the window. The #footer is as follows: Code: #footer {
position: absolute;
bottom: 0px;
(border/font/background/padding properties)
width: 310px;
margin-top: 8px;
clear: both;
}
you can view the full style sheet here. if the page has enough information to push past the window height, teh footer remains at the bottom of the window, and is placed on top of the stacking order. The strangest part is that if you scroll, the footer scrolls with the page. To see what i'm talking about, go to the page and try resizing the window. I have a DIV on my page with the style 'bottom' applied to it. It is coloured red so you can see it. I would like it at the bottom outside of all the other divs/containers. The DIV with the red background should be at the very bottom of the page, under the large DIV. This is the HTML placing it on the page: HTML Code: Code: <!-- InstanceEndEditable --></div> <div class="bottom">bottom</div> </body> You can see it is the last DIV on the page. Yes I am using Dreamweaver templates. Here is the CSS for the bottom class: Code: Code: .bottom {
margin: 0px;
padding: 0px;
background-color: red;
border: 0px solid #999999;
height: 20px;
width: 100%;
}
It appres in different places on different pages. 'bottom' DIV at the top of the page: http://www.jfwebdesign.co.uk/photog/ 'bottom' DIV almost at the bottom of the page: http://www.jfwebdesign.co.uk/photog/about.php 'bottom' DIV at the top of the page: http://www.jfwebdesign.co.uk/photog/work.php 'bottom' DIV at the top of the page: http://www.jfwebdesign.co.uk/photog/contact.php Here is a link to the CSS file: http://www.jfwebdesign.co.uk/photog/styles.css Can anyone explain why? Many thanks. I have been designing for a few years now, and never come across this error when I use w3c CSS validation, but when I attempted to validate my CSS for a wordpress theme I've created, I received the following error: Quote: Parse Error Lexical error at line 1, column 3. Encountered: "D" (68), after : "<!" My CSS is valid, as I keep it really simple, but from a quick Google search, it would seem that w3c CSS validation is attempting to validate my XHTML before my CSS? Does anyone have any suggestions (aside from pasting the CSS directly into the validation page)? Here is my CSS: Code:
body {
background : #003 url(images/bground.png) repeat-x;
color : #fff;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 11px;
margin : 0;
padding : 0;
text-align : center;
}
a {
color : #66f;
text-decoration : none;
}
p {
line-height : 14px;
margin : 0;
padding : 0 0 8px 0;
}
h1 {
background : url(images/h1-logo.png) no-repeat;
color : #300;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 48px;
height : 48px;
margin : 0;
padding : 0 0 0 56px;
}
#index-header {
height : 48px;
margin : 0;
padding : 24px;
text-align : left;
}
#index-header h1 a, #index-header a {
color : #300;
text-decoration : none;
}
.hdr1 {
float : left;
}
.hdr2 {
float : right;
}
.hdr2 ul {
font-size : 12px;
font-weight : bold;
list-style : none;
}
#navigation {
background : url(images/navbar.png) repeat-x;
height : 32px;
}
.nb {
float : left;
}
.nb2 {
float : right;
}
ul#navbar {
height : 16px;
margin : 0 12px;
padding : 0;
}
ul#navbar li {
float : left;
font-size : 13px;
font-weight : bold;
line-height : 16px;
list-style : none;
margin : 0;
padding : 8px;
}
ul#navbar li a {
color : #333;
text-decoration : none;
}
form#searchform {
float : right;
margin : 0;
padding : 6px;
}
form#searchform #s {
background : inherit;
border : 1px solid #333;
}
form#searchform #searchsubmit {
background : inherit;
border : 0;
color : #333;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 13px;
font-weight : bold;
}
#index-wrapper {
border : none;
margin : 0;
padding : 12px;
width : 100%;
vertical-align : top;
}
#slideshow {
background : url(images/Natural-Wonders.gif) no-repeat;
height : 300px;
width : 400px;
}
#recentposts {
padding : 0 0 0 12px;
text-align : justify;
width : auto;
vertical-align : top;
}
.index-post {
background : #306 url(images/post-h2.png) repeat-x;
margin : 0 0 12px 0;
padding : 6px;
}
.index-post h2, .index-post h2 a {
border-bottom : 1px solid #666;
color : #fff;
font-size : 16px;
font-weight : bold;
margin : 0 0 4px 0;
padding : 0;
text-decoration : none;
}
.postmetadata {
border-top : 1px solid #666;
color : #666;
font-size : 10px;
}
.tags {
margin : 0;
padding : 0;
vertical-align : top;
width : 400px;
}
#footer {
border-top : 1px solid #666;
margin : 12px 0;
padding : 12px 0 0 0;
}
#footer a {
color : #999;
text-decoration : none;
}
And just for good measure, here's the portion of the <head> tag that it is referring to: 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 profile="http://gmpg.org/xfn/11"> Hi all, Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html It's full of tests, but here's the problem.. The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it... Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean: http://www.jaysonsgroup.com/ztest/ntc/zie.gif The code is simple: Code: <div class="fieldname_long">Do you need more than one NTC Card</div> <div class="fieldvalue">(input field will come here)</div> <div class='spacer_1px'> </div> <div class='fieldname_text'>(To share the Modem with friends)?*</div> The CSS: Code:
.spacer_1px {
clear: both;
height: 1px;
overflow:hidden;
background: blue;
}
.fieldvalue {
float: left;
background: #ccc;
display: inline;
margin: 0;
}
.fieldname_long {
float: left;
width: 120px;
line-height: 13px;
padding-right: 15px;
color: #B30000;
font-weight: bold;
background: #eee;
display: inline;
margin: 0;
}
.fieldname_text {
color: #B30000;
font-weight: bold;
}
Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove. Sorry this is a really small thing but I just can't figure it out! Any ideas? Many thanks! The situation is very simple. Just test the following code in IE7 or Mozilla, and then in IE6. You will note that in IE6 there's a gap below the two divs. HOw can I fix this ? Code: <style>
.fontBold,.fontBoldLink{ font-family:tahoma; font-size:14px; font-weight:bold; color:#333333;}
.fontTitle { font-size:16px;}
.fontBoldLink { text-decoration:underline; cursor:pointer;}
</style>
<div style="overflow:auto; margin-top:20px; margin-bottom:0px; border:0px #000000 solid">
<div class="fontBold" style="width:150px; float:left; text-align:center; padding-top:3px; border:1px #999999 dashed ; border-bottom:0px; background-color:#EFEFEF; height:20px;">Left Padding</div>
<div class="fontBoldLink" style="float:right;padding-left:20px; background-repeat:no-repeat">Right Padding</div>
</div>
<div style=" background-color:#EFEFEF; clear:both; border:1px #999999 dashed; padding:10px; height:60px; margin-bottom:10px; margin-top:0px "></div>
I have been tearing my hair out trying to figure out what is causing this artifact. I am assuming that it's a rendering issue with IE6, but wanted to ask here to see if anyone can think of what is causing it. Here is a screenshot: http://www.chimericdream.com/downloads/indexv_v35_ie6_bug.jpg And here is the HTML/CSS markup for that part of the page: HTML Code: <div id="findHelp"> <h3 id="findHelpHeader">Find the help you need!</h3> <form id="findHelpForm" action="" method="post"> <fieldset> <label for="subject">Subject</label><br /> <select name="subject" id="subject"> <option value="">Search all subjects</option> </select> </fieldset> <fieldset> <label for="grade">Grade</label><br /> <select name="grade" id="grade"> <option value="">Search all grades</option> </select> </fieldset> <fieldset> <label for="type">Type of help</label><br /> <select name="type" id="type"> <option value="">Search all types</option> </select> </fieldset> <fieldset id="last"> <br /><input type="submit" value="" id="findSubmit" /> </fieldset> </form> <!-- #findHelpForm --> <div id="featuredTeachers"> <h3>Featured Teachers</h3> <div class="teacherBox"> <img src="images/photo_Lisa.jpg" alt="Lisa Yang" /><br /> Lisa Yang <img src="images/browseWidget_btnPromo.png" alt="Button" /><br /> <strong>Advanced Chemistry Prep</strong><br /> <small>9th grade - 12th grade</small><br /> <img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /> </div> <!-- .teacherBox --> <div class="teacherBox"> <img src="images/photo_Drew.jpg" alt="Drew Hamlin" /><br /> Drew Hamlin <img src="images/browseWidget_btnPromo.png" alt="Button" /><br /> <strong>Proper CSS/HTML Coding</strong><br /> <small>College</small><br /> <img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /> </div> <!-- .teacherBox --> <div class="teacherBox"> <img src="images/photo_Joey.jpg" alt="Joey Flynn" /><br /> Joey Flynn <img src="images/browseWidget_btnPromo.png" alt="Button" /><br /> <strong>Natural Sciences Overview</strong><br /> <small>6th grade - 8th grade</small><br /> <img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /> </div> <!-- .teacherBox --> <p><a href="#">See more teachers</a></p> </div> <!-- #featuredTeachers --> <div id="adobePlayer"> <h4>We've got something better for you.</h4> <p>For an interactive search experience, please download Adobe Flash Player.</p> <a href="#"><img src="images/browseWidget_btnGetFlash.gif" alt="Get Adobe Flash Player" /></a> </div> <!-- #adobePlayer --> </div> <!-- #findHelp --> CSS Code:
#findHelp {width: 743px; height: 313px; background: #fff url('images/browseWidget_background.png') top left no-repeat; position: relative; margin-bottom: 1em;}
#findHelp #findHelpHeader {position: absolute; top: 15px; left: 25px; font-size: 1.3em;}
#findHelpForm {position: absolute; top: 45px; left: 25px; width: 718px;}
#findHelpForm fieldset {float: left; width: 27%; margin-right: 10px;}
#findHelpForm fieldset label {font-weight: bold;}
#findHelpForm fieldset select {width: 100%; border-width: 1px; border-style: inset;}
#findHelpForm fieldset#last {width: 10%;}
#findSubmit {width: 88px; height: 23px; background: #fff url('images/browseWidget_btnSearch.gif') top left no-repeat;}
#featuredTeachers {position: absolute; bottom: 35px; left: 20px;}
#featuredTeachers p {position: absolute; bottom: -20px; right: 15px; font-size: 90%;}
.teacherBox {width: 175px; float: left; text-align: center;}
#findHelp #adobePlayer {width: 150px; position: absolute; bottom: 30px; right: 20px;}
#findHelp #adobePlayer h4, #findHelp #adobePlayer p {color: #777; margin-bottom: 1em;}
#findHelp #adobePlayer p {font-size: 85%;}
Any help would be greatly appreciated. |
|||||||