|
CSS - Same Z-index Acting Differently In Different Sites
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? Similar TutorialsHello, 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'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;
}
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? 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}
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. 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! Hi 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 Ive just finished building my site and ive implemented a text only alternative. I have not used CSS deliberately as i am unsure whether this, in some cases, is not supported by certain browsers. Reason i ask is because i want to specify font size as a % rather than px or pt so that end users can change the view to text "small" or "large" Would i be better off doing this in the html or by attaching a CSS? Thanks in advance, cuban Hi guys, Could you please make up a little list of the sites that u think best use CSS 2? Very good for learning P.S. I want pure CSS 2 (no basic table syntax or css 1 whatsoever) Thank you I've done a few web sites. Nothing really snazzy - I tend to focus on the information being available rather than having it "look cool". As a result, I've received various comments from "it's fantastic" (from people who are actually trying to find information) to "it's boring" (from those who are used to the frantic Flash-based web sites on a lot of the social networking places). There's a huge age range in users, too - it's a school-related site, so there are Jr. High students and their parents looking at it. Anyway, as a revamp, I started to look at CSS templates, partly as a way to play with CSS, but also because it seems to be the "right way" to do things these days. My earlier efforts use frames, and there's a header, a footer, a left-side navigation frame, and then the right-side "info" frame where everything shows up. So I did some Googling and found some offerings for free CSS templates. Grabbed a few and looked, and they are much nicer than my basic colors and styles. So I started working up a sample site and hit a snag when I wanted to do a second page. There was a sample index.html that had a section with a navigation menu on the left, and a flexible middle column, and a fixed column on the right. I got a basic front page together, and decided to create a new menu item for "About us", and link that to a new page. Here's my issue/problem - it seems that the way to create the new page is to duplicate the index.html, then hand tweak the menu to indicate the current location (there's a class="current" attribute on a <a> tag), and then rework the text section in the middle. While that's doable, it offends my programmer's ethic of "do the work only once", which, in this case, means that I can't see why the menu has to be rebuilt each time. Am I missing something? Is this the way that multipage sites based on CSS layouts really work? Or do I need to find a better sample or tutorial on doing a multipage site where the efforts need to be made once to get a menu working, and then leave it alone until a real change is required. Hi guys, Could you please make up a list of the best programmed CSS sites (markup-wise).... I haven't found anything near that in the sticky threads you have over here. 1/ k10k.net 2/ ??? 3/ ? Thank you If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? Hi, I have an unordered list displaying contact info for several people. For example: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'd like there to be a blank line between each person's info (just like it is displayed above). To do this, I added line breaks after each list item's closing tag. Here is the code: Code: <ul> <li>name1<br />address1<br />phone1<br /></li><br /> <li>name2<br />address2<br />phone2<br /></li><br /> <li>name3<br />address3<br />phone3<br /></li><br /> </ul> In Safari and Firefox (Mac and Win) there is a blank line between each section of contact info (the desired effect). In IE6, there is no blank line. It looks like this: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'm sure there is a fix out there, I just haven't found it yet. Any help is appreciated. - Tim I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web. The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari. This is what it looks like in IE7: This is what it looks like in IE8 and all the other browsers mentioned above: The page can be seen he http://dev.asbco.com/products/commercialindustrial/ Any help is greatly appreciated! Thanks! Ok so i initially put my CSS iwthin my HTML document as it was just going to be a test page. I then thought of expanding it into an actual site so wanted to transfer the CSS coding on and external CSS stylesheet. However when doing this the layers pull to the left and out of line .. any problem causing this? Also .. i know i have used position:absolute; tags, and using them is frowned upon when used on all layers. But without these, once again the layers again, are pulled to the left, any help would be fantastic. Regards, Joe. CSS within the XHTML document: Code: <style type="text/css">
<!--
body {
margin: -10px;
/*/*/margin: 0; /* */
padding: 0;
color: black;
background: white;
background-image: url(images/bg%20copy.png);
}
#content {
position:absolute;
width:200px;
height:78px;
z-index:1;
left: 112px;
top: 0px;
}
#nav {
position:absolute;
border:#000000;
border-width:thin;
width:142px;
height:320px;
z-index:2;
left: 123px;
top: 109px;
}
.style {
background:#A01B1E none repeat scroll 0%;
border:1px solid #000000;
}
#aff {
position:absolute;
width:137px;
height:29px;
z-index:3;
left: 123px;
top: 553px;
}
.style1 {font-size: 12px}
#news1 {
position:absolute;
width:200px;
height:43px;
z-index:4;
left: 307px;
top: 108px;
}
#news2 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 307px;
top: 278px;
}
#xtreme {
position:absolute;
width:27px;
height:38px;
z-index:6;
left: 860px;
top: 15px;
}
-->
</style>
I have two images, the first (nameplate) i have set to be ontop and centered, whose left side "hits" the side of the window when the window gets small enough like its supposed to. The second is set beneath it (silverplate) and is smaller than nameplate(1500x800). I want this to be centered too so that when the browser is resized it follows the nameplate and doesnt move against it or go out of window. I cant seem to achieve this effect with any combination of positioning and nested divs, the silverplate always goes off the left side of the window and tracks different than the nameplate. Why dont both images behave the same? How would i make them do that? Code: <style>
#nameplate {
top:0px;
height:1500px;
z-index:90;
height:1500px;
overflow:visible;
}
.img {
position:relative;
display:inherit;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;">
<div id="nameplate">
<img src="Assets/NamePlate.png" style=" z-index:98; opacity:0.5;" class="img" />
<img src="Assets/SilverPlate.png" style="z-index:95; left:-300px; top: -1000px; width:100px; height:100px;" class="img"/>
</div>
I was playing around with the CSS on my blog to try and get the header alligned correctly. In Firefox I added both a bottom and top margin to the #logo to make it align correctly. the bottom margin figure was -45px;. When checking the site in Chrome there was still a large gap under the logo. So after a little trial and error it seemed that Chrome wanted -125px as the bottom margin figure to achieve my desired results. So I've left it at -125px but then back on Firefox the navmenu is now aligned wrong. Any ideas? **EDIT** I can't link to my site so you can see it as I'm a new user. Hi there, I have some CSS tabs, but they are displaying differently in IE7 than FF. This is my code: PHP Code: #nav { float:left; width:100%; background:yellow; height: 27px; font-size:93%; line-height:normal; list-style: none; margin: 0px; } #nav li { float:left; background:url("images/tab_left.jpg") no-repeat left top; margin:0; padding:0px; list-style: none; } #nav a, #navheader strong, #nav span { display:block; background:url("images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; } and my html: PHP Code: <div id="nav"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Any ideas whats causing these different outcomes? http://www.lovemeforme.org/alecia/ I've made it so it works perfect in FF, IE, Netscape.. but in Opera it's messed up. Is there anyway I can specialize a stylesheet for just Opera? Also, anyone know of any free services that provide screen shots for all common web browsers. I remember I had a link a while ago, but I've since lost it. Thanks for the help in advance. Hello all, I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible? Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this? Thank you! |
|||||||