|
CSS - Functionality Issue With Css
ok, i really am at my wits end here and could use any assistence you guys can give. this is a little complicated to explain, but here goes.
i have this page: http://www.woowooberry.com/photo.html the page uses a style sheet called style.css. the problems: 1. i just realised that my ie6 browser at work makes this page use an old version of the stylesheet, even AFTER i uploaded the new one to my site via ftp. when checking the site at home, this is not an issue. but it is an issue on my work computer and every other computer at work where the site is loaded for the first time! ghosts in the shell? i have no clue. 2. the little boxes on the above page represent links to images. the boxes should be a dark grey and only turn blue AFTER being visited. this does not happen on any computer. or they are grey, for about one round...meaning if i refresh the page they all turn blue without being visited. the following is the TRUE css i have for it (which, from problem #1, may not be the css your computer uses...as i said, i do not know): Code:
.newbutton:link {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #a4a4a4;
TEXT-DECORATION: none
}
.newbutton:visited {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #00f4e0;
TEXT-DECORATION: none
}
.newbutton:hover {
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #f44b39;
TEXT-DECORATION: none
}
.newbutton:active {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #00f4e0;
TEXT-DECORATION: line-through
}
ok. couple of other problems but i'll leave that for later. these two are the major ones. again, any help you guys can give would greatly lower my blood pressure at this point. thanks. Similar Tutorialsso im working on the relatively lame site for some pocket cash, and ive run into a weird bump in the road with CSS. if one uses safari or firefox on a mac or firefox on a PC and goes to this page they will notice that rolling over one of the squares in the menu will cause a colored border to appear. this works on all browsers ive tried except windows IE. im stuck, ive tried some thing, but have never had this problem in the past. i have included the css in the index page, so one can view it w/ by viewing the source. Hey everyone, I'm learning CSS right now and recoding my existing site to use it. I've come into a few stumbling blocks and could use some help. First off, the site is meldstudios.com/newcode I am having a problem getting my sub nav to show up. I need it to function as well, but right now I'd just like to see it. In addition, the html text that is below the divs is supposed to overlay on top of it. Right now, that isn't happening and I believe it is pushing the footer out of whack. I'm not sure if I am not calling it in correctly in the html or what, but something is off. Finally, the thumbs and both navs have rollover states. I have read about using a transparent gif to set the hover states and visited states, but do people still use gif's? What is the best way to go about creating rollovers in CSS without the need for java script. My live site is meldstudios.com Take a look as that may explain what I am trying to do. Any help is greatly appreciated. I have included the parts of the CSS that are relevant below. #pagenav { width: 599px; height: 35px; margin-top: 45px; z-index: 100; float: left; } #about { background:url(images/aboutButton.jpg) no-repeat top left; float: left; width:113px; height:35px; } #portfolio { background:url(images/portfolioButton.jpg) no-repeat top left; float: left; width:120px; height:35px; } #resume { background:url(images/resumeButton.jpg) no-repeat top left; float: left; width:96px; height:35px; } #downloads { background:url(images/downloadsButton.jpg) no-repeat top left; float: left; width:134px; height:35px; } #contact { background:url(images/contactButton.jpg) no-repeat top left; float: left; width:133px; height:35px; } /*------------ sub nav --------------------------------------------------- */ #subnav { width: 598px; height: 23px; margin-top: 50px; z-index: 101; } #identity + branding { float: left; width:188px; height:23px; background-image: url(images/identityButton.jpg); background-repeat: no-repeat; } #print + advertising { float: left; width:171px; height:23px; background-image: url(images/printButton.jpg); background-repeat: no-repeat; } #applied design { float: left; width:127px; height:23px; background-image: url(images/appliedButton.jpg); background-repeat: no-repeat; } #web design { float: left; width:114px; height:23px; background-image: url(images/webButton.jpg); background-repeat: no-repeat; } /*------------ content --------------------------------------------------- */ #content { width: 902px; height: 495px; height: 650px; float: left; margin-left: auto; margin-right: auto; } #leftColumn { width: 599px; height: 495px; float: left; } #largeGraphicArea { width: 599px; height: 363px; float: left; } #smallBoxWithText img { width: 599px; height: 142px; float: left; position: absolute; top: 0px; left: 0px; z-index: 1; } #smallBoxText p { width: 400px; padding-left: 20px; padding-right: 20px; z-index: 3; float: left; text-align: left; } /*------------- right column --------------------------------------------------- */ #rightColumn { width: 301px; height: 495px; float: left; } #titleGraphic { width: 301px; height: 361px; float: left; z-index: 1; } .titleGraphicText p { width: 250px; padding-left: 10px; padding-right: 10px; z-index: 2; float: left; } Hello i created a website for my trainer and i am having pretty much trouble fixing a bug with the menu li:current and the compatability in various browsers. If someone please could check my website for errors and correct them? Its really a small website. I dont know what to do anymore, i tryed so much and nothing seems to work. Thanks in advance. my site is located at Code: http://hexagon.110mb.com/index.html I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible. I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav. I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover. I thought I could then do this as a single li but I have not had success. What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible. WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. Hey i don't know if this can be fixed by now i have looked everywhere and tried everything. i have a style sheet that does not work in IE6 and i don't know why. Code: body{
margin: 0;
padding: 0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color:red;}
#maincontainer{
width: 940px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 12px;
background: url(images/png_logo.gif) no-repeat right bottom;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}
#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 195px; /*width of right column in pixel*/
margin-left: -195px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 2px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}
A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}
A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
}
the html code is Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>PowerNet Global
</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up
to date information to help you needs a little better. The site may continue to change over the next few months, if you have
any suggestions on how to improve our site to bring you better service please feel free to eamil us at
<a href="mailto:support@pngusa.net">Support@pngusa.net</a>
<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><strong>Navigation</strong>
<table border="0" width="180">
<tr>
<td ><h5>Sevice Information</h5>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink">Overview Of Services</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
</td>
</tr>
</table>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>
</div>
</body>
</html>
"
In IE6 the right column does not show up and i am unable to give a link as it is on internal test server. I am having an issue with IE using the .htc file to render the CSS menu system I have. I am not sure why though. I think it has to do with the server that I have the site up on. Unfortunitly, I am unable to do anything to the server, so I will have to work around this issue. The menu system works the way it should in Firefox, but not IE. So if you can look at it (in Firefox) and help me figure out what I need to do to make it work in IE I would greatly appreciate it. The site is: www.fired-up.ca If you go he
Code: http://aissolutions.ca/clients/enerquality/training/courses/ you will see that when you click on the "expand text" link, it works fine in Firefox. However, in IE, the content gets "cut off" (the page doesn't expand with the content). Any ideas for a fix? So, on this page http://www.infothreads.com all 8 of the tshirts show up in Firefox, however, only 4 of them display in IE 6 or 7. Oddly, I can see the products when viewing the code in IEx, they're just not showing up on the site, which leads me to believe I done did something wrong with css. Any thoughts? Thank you. First take a look at the site in firefox or chrome: cristianoronaldo(dot)info as you can see the footer works great. However, when the site is viewed in IE (specifically IE8) the footer is displayed in the middle of the page. This happens throughout the whole site/blog when browsing with IE8 I have tried many things, such as trial and error, but nothing seems to work. Does anyone have any ideas on how to go about this? Hi guys, I have a page entity that is meant to be displayed like this: But in IE7 and IE8 on Windows is displaying like this: The page is: http://www.drivinglessonsoxford.com/ Any thoughts smart people? Hello all On the following page: http://planning.northumberland-national-park.org.uk/ if viewed in Mac IE (I believe version 5.0), the dotted lines below each left-hand menu item extend beyond the width of the menu across the whole of the main frame. The menu is a <ul>. The CSS is located at http://planning.northumberland-national-park.org.uk/css/style.css. Does anyone have any ideas? Thanks Tom i am trying to make a site for our scholl and i have manged to get it all working, on firefox and opera but on Ie everything is, out of focus or messed up, if you view it in opera or firefox, but ie it does not work, i do know about the ie but it only effects 5.* i am on 6 and it does not work, can anyone help me? http://webzine.dragongamer.net css Code: Original - css Code html { background: #000 url("/images/bg_main.gif") repeat 0 1px fixed; } #sidebar { float: right; /*margin-top: -40px;*/ position: relative; right: 0; width: 255px; z-index: 100; } body { background: transparent url("images/bg_wrapper.gif") repeat-y 50% 0 fixed; color: #333; font: 0.7em/160% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; } #sidebar .section { background: #747474 url("images/bg_sidebarsection.gif") no-repeat 0 100%; color: #f1f1f1; margin-bottom: 1px; padding-bottom: 5px; } #sidebar h3 { background: #434343 url("images/bg_sidebarsection_heading.gif") no-repeat 0 0; color: #f88600; font-size: 110%; font-weight: normal; letter-spacing: 0.05em; height: 40px; line-height: 42px; margin-bottom: 0.7em; padding: 0 15px; text-transform: uppercase; } * html #sidebar h3 { /* less line-height for IE */ line-height: 40px; } #sidebar .first h3 { background-position: -5px 0; } #sidebar h4 { color: #7c4c24; font-size: 110%; padding: 0 15px; } #sidebar a { color: #f1f1f1; text-decoration: underline; } #sidebar a:hover { background-color: transparent; text-decoration: underline; } #sidebar p, #sidebar ul, #sidebar ol { margin-bottom: 1em; padding: 0 15px; } #sidebar ul { list-style: none; } #sidebar ul a { background: transparent url("images/bg_listitem.gif") no-repeat 0 3px; color: #f1f1f1; padding-left: 16px; text-decoration: none; } #sidebar .alternate ul a { color: #0e3a73; } #sidebar #ad-rightside { padding: 20px 60px; } #navigationbar { background: #f1f1f1 url("images/bg_navigationbar.gif") no-repeat 100% 100%; color: #a4a4a4; float: left; padding-bottom: 2em; width: 173px; } #header { background: #1a1a1a url("images/bg_header.gif") repeat-x 0 0; height: 120px; position: relative; width: 940px; } #navigation { left: 173px; padding-left: 10px; position: absolute; top: 80px; } #searchform { background: transparent url("images/bg_search.gif") no-repeat 10px 7px; left: 0; height: 40px; position: absolute; top: 80px; width: 173px; } #header h1 { background: #c60000 url("/themes/Blue/images/logo.gif") no-repeat 0 0; height: 120px; overflow: hidden; text-indent: 200px; width: 173px; } #header h1.planetlogo { background: #c60000 url("images/planet-logo.gif") no-repeat 0 0; } #header h1 a { position: absolute; left: 15px; height: 40px; overflow: hidden; top: 20px; width: 135px; } #header h2 { color: #fa8900; font: normal 125% "Georgia", "Times New Roman", Times, serif; letter-spacing: 0.07em; position: absolute; left: 193px; top: 34px; width: 270px; } #header a, #header a:hover { color: #fff; text-decoration: none; } /*** Navigation Components ****************************************************/ #navigation ul, #navigation li, #navigation a { float: left; list-style: none; } #navigation a { color: #aaa; font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; height: 40px; line-height: 40px; padding: 0 10px; text-transform: uppercase; } #navigation a:hover { background: #141414 url("images/bg_navi_hover.gif") repeat-x 0 0; } #navigation .current_page_item a, #navigation .current_page_item a:hover { color: #fff; } #navigation .current_page_item a { background: transparent url("images/bg_navi_selected.gif") no-repeat 50% 100%; } #navigation .feedicon { padding-top: 12px; height: 16px; width: 16px; } /*** Navigationbar Components *************************************************/ #navigationbar h3 { color: #a4a4a4; font-size: 120%; letter-spacing: -0.05em; padding: 0 15px; text-transform: uppercase; } #navigationbar ul, #navigationbar ol { list-style: none; padding: 0 15px; } #navigationbar a { color: #1a1a1a; text-decoration: none; } #navigationbar a:hover { text-decoration: underline; } #navigationbar div { margin: 20px 0; padding: 0; } #navigationbar #archives { margin-bottom: -0.5em; } /*** Search Components ********************************************************/ #searchform input { background: transparent; border: none; color: #999; font-size: 90%; height: 18px; line-height: 18px; margin: 14px 0 0 20px; width: 95px; } #searchform input.focus { color: #000; } * html #searchform input { /** less margin-top for IE */ margin-top: 10px; } #searchform.issafari { background: transparent; } #searchform.issafari input { color: #000; font-size: 100%; height: auto; margin: 10px 0 0 15px; width: 115px; } #searchform button { border: none; background: transparent url("images/bg_searchbutton.gif") no-repeat 0 0; cursor: pointer; overflow: hidden; text-indent: 50px; width: 26px; height: 26px; position: absolute; right: 10px; top: 7px; } #searchform button:active { background-position: 0 -26px; } #wrapper { background: #fff url("images/bg_wrapper.gif") repeat-y 50% 0 fixed; margin: 0 auto; overflow: hidden; padding: 0 12px; width: 940px; } * { margin: 0; padding: 0; } #footer { background: #1a1a1a url("images/bg_header.gif") repeat-x 0 0; clear: both; color: #666; margin-top: 2em; padding: 20px; width: 900px; } /*** Footer Components ********************************************************/ #footer a { color: #fff; text-decoration: none; } #footer a:hover { background-color: transparent; text-decoration: underline; } #footer .feed { background: transparent url("images/icon_feed.gif") no-repeat 0 70%; padding: 0.2em 20px; padding-right: 0; } #pagebody { position: relative; width: 940px; }
When I resize the browser then scroll across my div tag images move along. Last time I fixed this problem with "min-width:100px;" etc but now it won't work. Hoping someone can figure out this problem :P <html> <head> <link rel="stylesheet" type="text/css" href="layout.css"/> </head> <body bottommargin="0" leftmargin="0" topmargin="0" > <div id="designLayout" align="center"> <img src="echo_rain.jpg" alt="" /> <div class="button_facebook"> <form> <input type="button" value="" class="button_fb" onclick="window.location.href='()"> </form> </div> <div class="button_twitter"> <form> <input type="button" value="" class="button_tw" onclick="window.location.href='()"> </form> </div> <div class="button_soundcloud"> <form> <input type="button" value="" class="button_sc" onclick="window.location.href='()"> </form> </div> <div class="button_youtube"> <form> <input type="button" value="" class="button_ut" onclick="window.location.href='()"> </form> </div> </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ body { background-color:#000; } .button_facebook { top:-135px; left:-230px; width:0px; height:0px; position:relative; } .button_fb { background:url(facebook.png) ; border:none; width:80px; height:80px; } .button_fb:hover { border:none; background:url(hover_fb.png); width:80px; height:80px; } .button_twitter { top:-135px; left:-115px; width:0px; height:0px; position:relative; } .button_tw { background:url(twitter.png) ; border:none; width:80px; height:80px; } .button_tw:hover { border:none; background:url(hover_tw.png); width:80px; height:80px; } .button_soundcloud { top:-133px; left:0px; width:0px; height:0px; position:relative; } .button_sc { background:url(soundcloud.png); border:none; width:75px; height:75px; } .button_sc:hover { border:none; background:url(hover_sc.png); width:75px; height:75px; } .button_youtube { top:-138px; left:115px; width:0px; height:0px; position:relative; } .button_ut { background:url(youtube.png); border:none; width:80px; height:80px; } .button_ut:hover { border:none; background:url(hover_ut.png); width:90px; height:90px; } Cheers in advance. Hey, I'm having issues w/ the right and bottom of this site... URL Here's the coding Code: <style type="text/css">
<!--
.topleft {
position: absolute;
height: 61px;
width: 52px;
left: 0px;
top: 0px;
background-color: #000000;
background-image: url(storefront/topleft.jpg);
}
.topcenter {
position: absolute;
height: 61px;
width: 100%;
left: 52px;
top: 0px;
right: 51px;
background-color: #000000;
background-image: url(storefront/topcenter.jpg);
background-repeat: repeat-x;
}
.topright {
position: absolute;
height: 61px;
width: 51px;
top: 0px;
right: 0px;
background-color: #000000;
background-image: url(storefront/topright.jpg);
}
.centerleft {
position: absolute;
height: 100%;
width: 52px;
left: 0px;
top: 0px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/centerleft.jpg);
background-repeat: repeat-y;
}
.centerright {
position: absolute;
height: 100%;
width: 51px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/centerright.jpg);
background-repeat: repeat-y;
}
.bottomleft {
position: absolute;
height: 38px;
width: 52px;
left: 0px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/bottomleft.jpg);
top: 0px;
}
.bottomcenter {
position: absolute;
height: 38px;
width: 100%;
left: 52px;
right: 51px;
bottom: 0px;
background-color: #000000;
background-image: url(storefront/bottomcenter.jpg);
background-repeat: repeat-x;
top: 0px;
}
.bottomright {
background-color: #000000;
background-image: url(storefront/bottomright.jpg);
position: absolute;
height: 38px;
width: 51px;
right: 0px;
bottom: 0px;
top: 0px;
}
.storefront {
position: absolute;
height: 100%;
width: 100%;
left: 125px;
top: 160px;
right: 0px;
bottom: 0px;
overflow: visible;
}
.center {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
position: absolute;
height: 100%;
width: 100%;
left: 52px;
top: 0px;
right: 51px;
bottom: 0px;
}
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #666666;
}
a:active {
text-decoration: none;
color: #990000;
}
.bottom {
position: absolute;
height: 38px;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
overflow: visible;
}
.hori-center {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 61px;
right: 0px;
bottom: 38px;
}
.top {
position: absolute;
height: 61px;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
}
-->
</style>
<div class="storefront" id="storefront">
<div class="top" id="top">
<div class="topleft" id="topleft"></div>
<div class="topcenter" id="topcenter"></div>
<div class="topright" id="topright"></div>
</div>
<div class="hori-center" id="hori-center">
<div class="centerleft" id="centerleft"></div>
<div class="center" id="center">INSERT ALL TEXT HERE ```````!</div>
<div class="centerright" id="centerright"></div>
</div>
<div class="bottom" id="bottom">
<div class="bottomleft" id="bottomleft"></div>
<div class="bottomcenter" id="bottomcenter"></div>
<div class="bottomright" id="bottomright"></div>
</div>
</div>
Pretty much, it's supposed to be a white box (w/ the cool edges) that expands height and width wise to fit the screen (the top and left margins are set for a header and left side global navigation) This is SOO important that I fix this today and I'd love and adore anyone that could help me MORE than you will ever know. Please let me know if you can help. And if you need more info contact me on AIM my screen name is taxgirlsrh or PM me or something. Please and thank you!! I am not familiar with CSS much at all, I am just edit over and over trying to make something work, I do not know if my problem is CSS or placement of the div in the code. if you visit mypricesavings (dot) com with Firefox it seems to have the footer in its proper place and the google ad is under the discussions, however, if you use google chrome the footer moves to the side of the categories, and the ad moves to the bottom leaving a large white space, and then shifts how do I fix this, thank you Derrick |
|||||||