|
CSS - Margin Property Acting Wierd
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! 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. Hi, i am very new to css and I am confused about the difference between margin-top vs top please help Regards Ltoso Hi, I have recently changed to using a DIV layout when designing sites. One problem i have noticed is that the margin:0 auto; doesn't work in IE5.5 What can I do to get around this? Many Thanks, Jonathan. I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS. css Code: Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }
.logo{
Here is my html of that part. html Code: Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> Here is what it outputs. http://blacknine.net/test.html http://xplozive.net/ When you go to that in firefox and rollover one of the links on the left, the content bg color shortens...anyway to fix this? Hi, im making a site for a friend but cant seem to understand why the css works fine on one page and the exact same css fails on another. CSS: Code: #topmenu_wow {
background-image: url(images/wow_menu.png);
height: 73px;
width: 1030px;
display: block;
background-repeat: no-repeat;
position: relative;
margin-right: auto;
margin-left: auto;
}
#topmenu_war {
background-image: url(images/war_menu.png);
height: 73px;
width: 1030px;
display: block;
background-repeat: no-repeat;
position: relative;
margin-right: auto;
margin-left: auto;
}
#menupos {
top: 15px;
position: relative;
}
html for the menu: Code: <div id="topmenu_war"><!--this is the one row im changing, topmenu_war (not working) or topmenu_wow (working)--> <span id="home"><a href="index.html"><span id="menupos">Home</span></a></span> <span id="info"><a href="info.html"><span id="menupos">Info</span></a></span> <span id="demo"><a href="demo.html"><span id="menupos">Demo</span></a></span> <a href="#"><span></span></a> <span id="pricing"><a href="pricing.html"><span id="menupos">Pricing</span></a></span> <span id="order"><a href="order.html"><span id="menupos">Order</span></a></span> <span id="support"><a href="support.html"><span id="menupos">Support</span></a></span></div> The working page The bugged page I've tried to put each file in a own folder with a own css (eg /wow/index.html) but no luck. Any help is welcome! Regards - mrsarun Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
I'm having this issue where 1st paragraph is not indented then all the rest are.... I don't want any indentation.... yet for some reason something is causing it to. How can i investigate what's causing this? Thanks. (btw there's no UL or LI involved in this only P Hello, I am experincing something strange with a basic table enclosed in my content div... The situation: I have basic layout, a header with 2 columns. The main content div holds the left hand side of the page and all works well... except the table. It shoots off the screen and a horizontal scroll bar apears and the table aligns up next to the far left div when viewed in Firefox, but aligns properly when viewed in IE 6. If I enclose the table in a paragraph tag, it displays properly but then fails XHTML validation stating that I have enclosed a block element within a line element. I have gone over and over the table tags, and all seems correct... went to the w3c and mimicked their sample table and have gotten the same prob. Has anyone else experinced this?? DIscovered any solutions?? Help! Thanks. edit... here is the code: the CSS portion: #header { color: #a47716; border-top: .1px solid #e5eca9; margin: 0; padding: 0; height: 100px; background: #ccdd99 url("./headerBG.png") repeat-x; } h1.header, h2.header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #a47716; border-bottom: none; } #content { padding: 40px 10px 10px 10px; background: #fff; margin: 0px 25% 20px 5px; border-top: 2px groove #87c6ae; border-right: 2px outset #87c6ae; border-left: 2px groove #87c6ae; width: 75%; } #rightCol { margin: 0px; position: absolute; top: 140px; width:20%; right: 0; padding: 30px 10px 10px 10px; } #footer { margin: 0 25% 0 5px; padding: 0; text-align:center; font-size:small; } The XHTML: <!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> <title>the title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- @import allTheStyleSheets.css; --> </style> </head> <body> <!-- begin page header --> <div id="header"> <?php include('./incHeader.php')?> </div> <!-- end page header --> <!-- begin tab menu --> <div id="tabMenu"> <?php include('./incNav.php')?> </div> <!-- end tab menu --> <!-- begin main content --> <div id="content"> <table summary="A summary."> <caption> The Caption</caption> <tr> <th id="topic">Topic</th> <th id="issue">Issue</th> <th id="action">Action</th> </tr> <tr> <td headers="topic"><h3>Heading</h3> <p><a href="http://murphyzone.no-ip.com/GCCBFM/news/blog/index.php?p=10">Comment</a></p></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic">cell content</td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> </table> </div> <!-- end main content --> <!-- begin right column --> <div id="rightCol"> the right column... </div> <!-- end right column --> <!-- begin footer --> <div id="footer"> <?php include('./incFooter.php')?> </div> <!-- end footer --> </body> </html> Thanks again. Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh 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'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;
}
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? 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. 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 |
|||||||