|
CSS - My Drop Down Div Falls Behind All The Other Content?
i am working on an autocomplete, and in firefox it works beautifully, in IE when the drop down occurs it falls behind all the other content on the page.
i have tried using z-index to bring it up and that didnt work, what else is there that i can do to try and get this to work? http://www itsdavesworld com / divbehind.jpg Similar TutorialsHI, Not only is this my first time posting, its my first site ever built using CSS (trying to learn as I go). The page displays fine in IE7 but my content boxes are outside of the wrapping container in Firefox, tried to figure it out myself, but don't really know enough yet. (URL address blocked: See forum rules) The CSS is embedded in the head of the page. Any help is much appreciated, Regards Fiona Hi, I'm trying to include some text within a div, but the last line always seems to fall outside the bottom border. An image of what it looks like is attached. Here's the html I'm using: Code:
<div class="tbl-row <?php echo ($intRow % 2 == 0) ? ("tbl-row-odd") : ("tbl-row-even"); ?>">
<div class="title-lbl">Site: </div>
<div class="title-text"><?php echo $aCols["site_name"]; ?></div>
<img src="{ImgSpacer}" alt="" width="1" height="20" /><br />
<div class="contents-text"><?php echo nl2br($aCols["contents"]); ?></div>
<div>
<span class="subon-text"><?php echo $aCols["local_time"]; ?></span>
<span class="subon-lbl"> at: </span>
<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
<span class="subon-lbl"> on: </span>
<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
<span class="subby-lbl">Submitted by: </span>
</div>
</div>
and here's the css: Code:
.contents-text {
color : #F98537;
font-size : 15px;
text-align : left;
}
.tbl-row {
border-radius : 15px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
margin-left : auto;
margin-right : auto;
padding : 8px;
vertical-align : top;
width : 96%;
}
.tbl-row-even {
background-color : #FFEBCB;
}
.tbl-row-odd {
background-color : transparent;
}
.subby-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subby-text {
color : #F0F;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-text {
color : #F0F;
display : inline;
float : right;
font-size : 14px;
vertical-align : top;
}
After much testing, I've found that it's the floats that seem to be causing the problem. When I take them out, the row is included within the outside div, but when I put them back in, the row falls outside. I need to keep the floats, because I would like to have the "Submitted" row aligned to the right, unless there's another way to achieve the same effect. So, does anyone know how I can have the last row right-aligned and included within the surrounding div? Debbie http://www.larreamma.com/kids_programs.html On the PC the last 'About Us' menu overlaps the body content when it is expanded. Does not occur on Mac (FF, Safari, Chrome). Tried playing with 'z-index' but if that is the issue then I am not putting it in the right place. Thank you in advance. --------This Part Solved!--------- Hi Guys! I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin. Here is the page: http://www.whitecapgraphics.com/bates/front.php If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div. PS - The Home button does not have a drop down menu. My CSS: Code:
#d1 {
background-color: #003366;
float: left;
width: 200px;
background-image: url(images/header_bg.gif);
background-repeat: repeat-x;
height: 107px;
}
#d2 {
background-color: #1F2935;
float: right;
width: 477px;
background-image: url(images/header_bg.gif);
}
#head_container {
background-color: #000066;
float: left;
background-image: url(images/header_bg.gif);
height: 107px;
}
#nav_container {
background-color: #1F2935;
float: left;
width: 100%;
background-image: url(images/nav_bar_bg.gif);
height: 30px;
}
#page_container {
margin: auto;
width: 99.99%;
height: 100%;
}
#content_container {
background-color: #e4e4e4;
float: left;
width: 100%;
background-image: url(images/content_blue_column_bg.gif);
background-repeat: repeat-y;
background-position: right;
}
#content {
background-color: #e4e4e4;
position: relative;
margin-right:253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
padding-left: 10px;
padding-right: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
}
#right_column {
background-color: #CC9900;
float: right;
width: 253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
/*____________________________________________________________*/
* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */
/* the horizontal menu starts here */
div#nav {
width:600px; /* sizes the nav div at a fixed width */
float:left;
background-color:#CCF; /* colors the div */
background-image: url(images/nav_bar_bg.gif);
z-index:10;
}
div#nav li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
border:1px solid black; /* creates dividing lines between the li elements */
font-family:Georgia, "Times New Roman", Times, serif;
font-size: medium;
font-weight: bold;
min-width: 126px;
text-align:center;
height:26px;
}
div#nav li:first-child {
border-left:1px solid; /*the first vertial line on the menu */
}
div#nav li:hover {
background-color:#D1C9B9; /*sets the background of the menu items */
}
div#nav a {
display:block;
padding:1px 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#D1C9B9; /* sets the type color */
}
div#nav a:hover {
color:black;
}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
margin:0;
z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
left:-1px; /*aligns the drop exactly under the menu */
top:28px;
}
#pyt ul li {
background-color:#B3916B;
}
#h ul li {
background-color:#1F2935;
}
#ri ul li{
background-color: #827977;
}
#bn ul li{
background-color: #455D67;
}
div#nav ul li ul li {padding:0;
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid; /* three sides of each drop-down item */
border-bottom:1px solid;
border-right:1px solid;
}
div#nav ul li ul li a {
padding:1px .5em;
font-size:small;
text-align:left;
vertical-align:middle;}
div#nav ul li ul li:first-child {
border-top:1px solid; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}
/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#nav ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
@media all and (min-width: 0px){
body div#nav ul li ul {padding-bottom:22px;}
}
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */
#h {
background-color: #1F2935;
}
#ri {
background-color: #827977;
letter-spacing: -.06em;
}
body {
background-color: #1F2935;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#pyt {
background-color: #B3916B;
}
#bn {
background-color: #455D67;
}
#content #flash_map {
text-align: center;
border: 2px solid black;
width: 660px;
margin: auto;
}
--------****Still Need Help Here!----------- Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated: ****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>? 2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED* Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! hi, I have a layour where the container is 100% high, and then I have a header and nav then I have a #main and #bar divs (columns) then #footer I would like for the footer to stick to the bottom and the main, and bar expand to the bottom (even if there isn't enough text) does this make sense, heres my css PHP Code: html,body { height:100%; margin:0px; padding:0px; background: #eee; } #container { height:100%; margin: 0 auto; width: 720px; border-left: 1px solid #000; border-right: 1px solid #000; background: #f00; } #header { height: 170px; background: #ff0 url('../images/header.gif'); } #nav { height: 25px; padding: 5px; background: #666; } #main { width: 400px; float: left; padding: 10px; background: #fff; } #bar { padding: 10px; margin-left: 420px; border-left: 1px solid #006; background: #fff; } #copy { height: 30px; background: #999; clear: both; } I am working form a template that I am modifying a website and the the content is working fine in Chrome, Safari, and FF, but the part of the sidebar shows up in IE7 and no other content. Any asssitance will be appreciated. I tried different hacks with no luck. I got errors for unscrollable content but I don't believe that is it because I tried all "fixes" Code: /* begin Page */
www.justgreek.com/questions.html
body
{
margin: 0 auto;
padding: 0;
background-color: #D08C35;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
}
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 630px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 630px;
width: 817px;
margin: 0;
}
html:first-child #art-page-background-glare
{
border: 1px solid transparent; /* Opera fix */
}
#art-page-background-gradient
{
position: absolute;
background-image: url('images/Page-BgGradient.jpg');
background-repeat: repeat-x;
top:0;
width:100%;
height: 900px;
}
#art-page-background-gradient
{
background-position: top left;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
form
{
padding:0 !important;
margin:0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */
/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 955px;
min-width:55px;
min-height:55px;
}
.art-Sheet-body
{
position: relative;
z-index: 1;
padding: 4px;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 66px;
height: 66px;
background-image: url('images/Sheet-s.png');
}
.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 33px, 33px, auto);
}
.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 33px, 33px);
}
.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(33px, 33px, auto, auto);
}
.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(33px, auto, auto, 33px);
}
.art-Sheet-tc, .art-Sheet-bc
{
left: 33px;
right: 33px;
height: 66px;
background-image: url('images/Sheet-h.png');
}
.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 33px, auto);
}
.art-Sheet-bc
{
bottom: 0;
clip: rect(33px, auto, auto, auto);
}
.art-Sheet-cr, .art-Sheet-cl
{
top: 33px;
bottom: 33px;
width: 66px;
background-image: url('images/Sheet-v.png');
}
.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 33px);
}
.art-Sheet-cl
{
left:0;
clip: rect(auto, 33px, auto, auto);
}
.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 33px;
left: 33px;
right: 33px;
bottom: 33px;
background-color: #FFFFFF;
}
.art-Sheet
{
margin-top: 10px !important;
}
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:955px;
}
/* end Box, Sheet */
/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 947px;
height: 136px;
}
div.art-Header-png
{
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 947px;
height: 136px;
background-image: url('images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 947px;
height: 136px;
background-image: url('images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.art-menu li li
{
float: none;
}
.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}
.art-menu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.art-menu
{
padding: 4px 2px 0px 2px;
}
.art-nav
{
position: relative;
height: 29px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 29px;
background-image: url('images/nav.png');
}
.art-nav .l
{
left: 0;
right:0px;
}
.art-nav .r
{
right: 0;
width: 947px;
clip: rect(auto, auto, auto, 947px);
}
/* end Menu */
/* begin MenuItem */
.art-menu ul li
{
clear: both;
}
.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 25px;
cursor: pointer;
text-decoration: none;
margin-right: 4px;
margin-left: 4px;
}
.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 75px;
background-image: url('images/MenuItem.png');
}
.art-menu a .l
{
left:0;
right:11px;
}
.art-menu a .r
{
width:422px;
right:0;
clip: rect(auto, auto, auto, 411px);
}
.art-menu a .t
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #DEDEDE;
padding: 0 2px;
margin: 0 11px;
line-height: 25px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top:-25px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-25px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-25px;
}
.art-menu a:hover .t
{
color: #F0F0F0;
}
.art-menu li:hover a .t
{
color: #F0F0F0;
}
.art-menu li:hover>a .t
{
color: #F0F0F0;
}
.art-menu a.active .l, .art-menu a.active .r
{
top: -50px;
}
.art-menu a.active .t
{
color: #000000;
}
/* end MenuItem */
/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow:hidden;
line-height: 20px;
margin-right: auto;
background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-menu ul ul a
{
margin-left: auto;
}
.art-menu ul li a:hover
{
color: #3B3B3B;
background-position: 0 -20px;
}
.art-menu ul li:hover>a
{
color: #3B3B3B;
background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #3B3B3B;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #3B3B3B;
}
/* end MenuSubItem */
/* begin ContentLayout */
div.art-content
{
width:709px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right auto;
}
.art-contentLayout
{
position: absolute;
top: 156px;
margin-bottom: 6px;
width: 947px;
}
/* end ContentLayout */
/* begin Box, Block */
.art-Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:15px;
min-height:15px;
}
.art-Block-body
{
position: relative;
z-index: 1;
padding: 7px;
}
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
width: 14px;
height: 14px;
background-image: url('images/Block-s.png');
}
.art-Block-tl
{
top:0;
left:0;
clip: rect(auto, 7px, 7px, auto);
}
.art-Block-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 7px, 7px);
}
.art-Block-bl
{
bottom: 0;
left: 0;
clip: rect(7px, 7px, auto, auto);
}
.art-Block-br
{
bottom: 0;
right: 0;
clip: rect(7px, auto, auto, 7px);
}
.art-Block-tc, .art-Block-bc
{
left: 7px;
right: 7px;
height: 115px;
background-image: url('images/Block-h.png');
}
.art-Block-tc
{
top: 0;
clip: rect(auto, auto, 7px, auto);
}
.art-Block-bc
{
bottom: 0;
clip: rect(7px, auto, auto, auto);
}
.art-Block-cr, .art-Block-cl
{
top: 7px;
bottom: 7px;
width: 1px;
background-image: url('images/Block-v.png');
}
.art-Block-cr
{
right:0;
clip: rect(auto, auto, auto, 7px);
}
.art-Block-cl
{
left:0;
clip: rect(auto, 7px, auto, auto);
}
.art-Block-cc
{
position:absolute;
z-index:-1;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
background-color: #F8EFE2;
}
.art-Block
{
margin: 7px;
}
/* end Box, Block */
/* begin BlockHeader */
.art-BlockHeader
{
position:relative;
z-index:0;
height: 30px;
padding: 0 7px;
margin-bottom: 7px;
}
.art-BlockHeader .t
{
height: 30px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
white-space : nowrap;
padding: 0 6px;
line-height: 30px;
}
.art-BlockHeader .l, .art-BlockHeader .r
{
display:block;
position:absolute;
z-index:-1;
height: 30px;
background-image: url('images/BlockHeader.png');
}
.art-BlockHeader .l
{
left:0;
right:6px;
}
.art-BlockHeader .r
{
width:947px;
right:0;
clip: rect(auto, auto, auto, 941px);
}
.art-header-tag-icon
{
height: 30px;
background-position:left top;
background-image: url('images/BlockHeaderIcon.png');
padding:0 0 0 12px;
background-repeat: no-repeat;
min-height: 12px;
margin: 0 0 0 5px;
}
/* end BlockHeader */
/* begin Box, BlockContent */
.art-BlockContent
{
position:relative;
z-index:0;
margin:0 auto;
min-width:1px;
min-height:1px;
background-color: #FFFFFF;
}
.art-BlockContent-body
{
position: relative;
z-index: 1;
padding: 8px;
}
.art-BlockContent-body
{
color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-BlockContent-body a:link
{
color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
.art-BlockContent-body ul
{
list-style-type: none;
color: #4A4A4A;
margin:0;
padding:0;
}
.art-BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}
.art-BlockContent-body ul li
{
padding:0px 0 0px 13px;
background-image: url('images/BlockContentBullets.png');
background-repeat:no-repeat;
margin:0.5em 0 0.5em 0;
line-height:1.2em;
}
/* end Box, BlockContent */
/* begin Box, Post */
.art-Post
{
position:absolute;
z-index:0;
margin:0 auto;
min-width:706px;
min-height:1px;
}
.art-Post-body
{
position: absolute;
z-index: 1;
padding: 10px;
}
.art-Post
{
margin: 7px;
}
/* Start images */
a img
{
border: 0;
}
.art-article img, img.art-article
{
border: solid 1px #C4C4C4;
margin: 1em;
}
.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
/* Finish images */
/* Start tables */
.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
width:auto;
}
.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
background-color:Transparent;
}
.art-article th, .art-article td
{
padding: 2px;
border: solid 1px #5C5C5C;
vertical-align: top;
text-align:left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}
/* Finish tables */
pre
{
overflow: auto;
padding: 0.1em;
}
/* end Box, Post */
/* begin PostHeaderIcon */
.art-PostHeader
{
text-decoration:none;
margin: 0.2em 0;
padding: 0;
font-weight:normal;
font-style:normal;
letter-spacing:normal;
word-spacing:normal;
font-variant:normal;
text-decoration:none;
font-variant:normal;
text-transform:none;
text-align:left;
text-indent:0;
line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #661919;
}
.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
margin:0;
color: #661919;
}
/* end PostHeaderIcon */
/* begin PostHeader */
.art-PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #7A1F1F;
}
.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #4D4D4D;
}
.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #BC2F2F;
}
/* end PostHeader */
/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #404040;
}
.art-PostContent p
{
margin: 0.5em 0;
}
.art-PostContent, .art-PostContent p
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-align: justify;
color: #84561E;
}
.art-PostContent
{
margin:0;
}
/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #3B3B3B;
}
/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #BC2F2F;
}
/* Finish Content link style */
/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
font-weight: normal;
font-style: normal;
text-decoration: none;
}
/* Start Content headings Fonts & Colors */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #8F2424;
}
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #BC2F2F;
}
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #595959;
}
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #A72A2A;
}
h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #292929;
}
h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #292929;
}
/* Finish Content headings Fonts & Colors */
/* end PostContent */
/* begin PostBullets */
/* Start Content list */
ol, ul
{
color: #404040;
margin:1em 0 1em 2em;
padding:0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
li ol, li ul
{
margin:0.5em 0 0.5em 2em;
padding:0;
}
li
{
margin:0.2em 0;
padding:0;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position:inside;
}
.art-Post li
{
padding:0px 0 0px 13px;
line-height:1.2em;
}
.art-Post ol li, .art-Post ul ol li
{
background: none;
padding-left:0;
}
.art-Post ul li, .art-Post ol ul li
{
background-image: url('images/PostBullets.png');
background-repeat:no-repeat;
padding-left:13px;
}
/* Finish Content list */
/* end PostBullets */
/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
color:#2E2E2E;
font-family: Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}
blockquote,
.art-PostContent blockquote
{
border:solid 1px #DD7878;
margin:10px 10px 10px 50px;
padding:5px 5px 5px 41px;
background-color:#EEBABA;
background-image:url('images/PostQuote.png');
background-position:left top;
background-repeat:no-repeat;
}
/* Finish blockuote */
/* end PostQuote */
/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:33px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
}
.art-button-wrapper
{
display:inline-block;
position:relative;
height: 33px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}
.firefox2 .art-button-wrapper
{
display:block;
float:left;
}
.art-button-wrapper .art-button
{
display:block;
height: 33px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-align: left;
padding: 0 21px !important;
line-height: 33px;
text-decoration: none !important;
color: #FAF3EA !important;
}
input, select
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FBEFEF !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #F2F2F2 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 92px;
background-image: url('images/Button.png');
}
.art-button-wrapper .l
{
left:0;
right:10px;
}
.art-button-wrapper .r
{
width:409px;
right:0;
clip: rect(auto, auto, auto, 399px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -33px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -66px;
}
/* end Button */
/* begin Footer */
.art-Footer
{
position:relative;
z-index:0;
overflow:hidden;
width: 947px;
margin: 5px auto 0px auto;
}
.art-Footer .art-Footer-inner
{
height:1%;
position: relative;
z-index: 0;
padding: 8px;
text-align: center;
}
.art-Footer .art-Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('images/Footer.png');
width: 947px;
height: 150px;
bottom:0;
left:0;
}
.art-Footer .art-Footer-text p
{
margin: 0;
}
.art-Footer .art-Footer-text
{
display:inline-block;
color:#000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}
.art-Footer .art-Footer-text a:link
{
text-decoration: none;
color: #DEAF73;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-Footer .art-Footer-text a:visited
{
text-decoration: none;
color: #333333;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-Footer .art-Footer-text a:hover
{
text-decoration: none;
color: #291C0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */
/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
font-family:Arial;
font-size:10px;
letter-spacing:normal;
word-spacing:normal;
font-style:normal;
font-weight:normal;
text-decoration:underline;
color:#D69D51;
}
.art-page-footer
{
margin:1em;
text-align:center;
text-decoration:none;
color:#949494;
}
/* end PageFooter */
/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
position: absolute;
margin: 0;
padding: 0;
border: 0;
left: 0;
overflow: hidden;
width: 236px;
}
/* end LayoutCell */
/* begin LayoutCell */
.art-contentLayout .art-content
{
position: absolute;
margin: 0;
padding: 0;
border: 0;
right: 0;
overflow: hidden;
width: 709px;
}
.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 945px;
}
.ProductItem {
border-color:#CCCCCC;
border-style:solid;
border-width:1;
padding:5;
padding-top:10;
width:200px;
}
.ProductItem {
font-size:11;
width:200px;
}
.ProductItemClick {
text-align:center;
width:100%;
cursor:pointer;
}
.ProductItemImage {
text-align:center;
width:200px;
cursor:pointer;
height:125px;
}
.ProductItemName {
height:40;
text-align:center;
line-height:14px;
}
.ProductItemShortDesc {
border-color:#857358;
border-style:solid;
border-width:1;
background-image:url(Images/DescBG.png);
color:#FFFFFF;
height:35;
padding:0;
!padding:3;
font-size:10px;
line-height:12px;
}
/* end LayoutCell */
Hi, I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc. The design of the site goes: header -> main content -> footer. The navigation will sit in the header above the main content. all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands. So my question is... I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.? any tips ladies and gentlemen? my css : Code: #contentright {
width:171px;
padding:0px;
float:left;
background:#fff;
}
I am new to useing css for layout and am running into a problem where if I do Code: <div id="contenteight"> some text </div> then try to do it again Code: <div id="contenteight"> some more text </div> it doesn't place the new text on the right, but rather at the bottom left. also my while page is inside of Code: #frame {
width:823px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
any help thanks Hi Could someone please take a look at this please http://dmumford.bizhat.com/test/ When viewed in IE5 the clinical info box does not line up to the righ hand edge. I have tried a few hacks but I don't think I am implementing them right. Your help is much appreicated Thanks Can someone point me to a tutorial (or if it's easy enough, just show me here) where I can learn how to make a scrolling div? Ideally, one that looks like this (this would be on a black-backgrounded page): Thanks!... I have a website that using AJAX with PHP to display a Flash slideshow. The slideshow is generated dynamically based on MySQL queries and PHP-generated XML. However, this is all above the scope of my problem. I made a static version of the page to remove all PHP and AJAX variables, and the problem persists. Basically, I have a content column DIV that contains a DIV for "story" (i.e. whatever the content happens to be, in this case a variety of links and a flash slideshow). Inside that DIV is another DIV for "picview". This is where the OBJECT tags are included that show the Flash file. When the picview DIV is populated with the code, the entire content column DIV shifts down to below the vnav. When the code is removed, the page looks as expected (with the content column just under the header, lining up with the vnav). gatewaylatin.com/scrapbook/test1.htm The above URL is a link to a static page showing what the page SHOULD look like. gatewaylatin.com/scrapbook/test.htm The above URL is a link to another page, using the exact same static code with the one exception that the PICVIEW DIV is populated with the appropriate tags to include the Flash object. In Firefox, IE7, and other modern browsers, both of these pages look the same (with the obvious exception of the Flash object on the second page). However, on IE6/Win, the second page is completely malformed. I would appreciate any help in this matter. For easy reference, the CSS files used by the above page a gatewaylatin.com/style/base.css gatewaylatin.com/style/base_v4.css Thanks in advance and let me know if you need further information or want me to try anything. I hope this is a quick fix and someone with more expertise than myself can easily spot the problem. My documentation for css shows that content: url(); works in navigator but not in ie. The info I've got is dated. Does the content property work in the newer ie browsers? Hi, I know this may be a basic question, but I'm apparently one of the last converts from tables to css and I've been searching how to center my site within the browser window. I've currently done all my layout using css and absolute positioning... it looks great, and it sure is easier than tables... but it's as if the site is aligned to run on the left of the browser rather than the preferred center. Should I use something other than "absolute" positioning (too bad if so, because I liked the ease)? Any advice? Thanks in advance for any help. |
|||||||