|
CSS - New To Css--small Issue, Can't Find Cause
Hello all!
I'm new to the community here--it feels great to be a part of an active community where people can give eachother help. I'd consider myself a pretty good Web designer, I mean, I've been doing it for a long time, however, I'm still very new to the concept of CSS. I've used it with rollover links, but never have I used it to design an entire Web page (basically, I've used tables my whole life). Now that I've gotten some practice with CSS by reading books and tutorials, I've put together a start-up page for a computer company that I am a part of. We are a new company and are looking to start off on the right foot by having a killer Web site. So in the past two weeks I've been hand-coding this Web site. http://www.freewebs.com/missaghi As you can see, it's all in CSS! I'm very happy that I've been able to accomplish this, but there is a problem that I've found, and honestly, I've yet to find the cause! If you are using Firefox (and I hope you are, if you're using a PC), you'll notice that the TOP of the paragraphs are CORRECTLY horizontally aligned with the TOP of the navigation links. It looks nice and clean. Now open up the site with Internet Explorer (I know it's hard for some of you, as it is me, heh), and notice how the paragraphs sit lower by about seven or so pixels. Well, if you look at my code, I have forced the margin up by 18 pixels (margin: -18px 0px 0px 140px) in order for my paragraphs to be aligned in Firefox. I COULD have modified it for IE, but meh, I'd rather make sure Firefox is covered since in my opinion, it has the best CSS support. However, my goal is to find out WHY it is acting different in all these browsers, and WHY I need to cheat (using the -18px) in order to make it work. Any help would be greatly appreciated, and I'm sorry that this is so long. Regards, Nathan Similar Tutorialsbattleglory.mattaproductions.com/layout Somewhere in the coding I made a issue somewhere and I don't know where. In firefox the layout shows up fine, but in Internet Explorer there is like a pixel gap between the top content image and the text. Appreciate anyone's help....thanks. Matta EDIT: Special thanks to ryan-reese-09 and kk5st for the wonderful support they both gave. What happen was a gap below the images in IE and firefox displayed just fine. I added: img{ vertical-align: bottom; } Fixed the issue immediately. But than my images were to close so than I added: #special_feature_btm img { padding: 0px 0px 10px 0px; } #content_btm img { padding: 0px 0px 10px 0px; } This gave a 10px space to the bottom of the images. Remember top, right, bottom, left (clockwise). So the rest I didn't need to change. I hope I summarized this up well and hope it helps you guys out sometime. Thanks again! Matta The "on" tab of my menu system displays an odd pixel or so gap on both sides of the tab where I want it to intersect with the border of the navigation bar below it. I am unsure why it is there or how to fix it.... any help is appreciated, and a picture of the issue is attached, along with the 3 needed image files that will replicated the issue. 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=iso-8859-1">
<title></title>
<style type="text/css">
@import "menu.css";
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#top {
width:750px;
height:60px;
padding:5px 1px 0 3px;
}
#logohead {
width:370px;
height:60px;
position:absolute;
left:157px;
top:17px;
/*float:left;*/
background-image:url(../images/ricochetlogo.gif);
background-repeat:no-repeat;
background-position:bottom left;
z-index:5000;
}
#toplinks {
height:60px;
width:365px;
margin-left:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
#midbanner {
width:auto;
height:170px;
border:1px solid red;
position:relative;
}
#midblock {
width:auto;
height:45px;
position:relative;
background-color:#6292BB;
margin:1px 0 0 0;
}
#bottomcontent {
width:auto;
height:auto;
/* border:1px solid #990; */
}
#leftnavbox {
}
#leftboxes {
width:185px;
height:auto;
padding:5px 5px 0 5px;
float:left;
border:1px solid gray;
}
.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
background-image:url(../images/leftboxstrip.gif);
background-repeat:no-repeat;
background-position:top;
color:#334C99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
padding-top:2px;
}
.leftbox{
margin-bottom:10px;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:205px;
border:1px solid pink;
}
.rightbox1, .rightbox2, .rightbox3 {
height:176px;
width:165px;
border:1px solid blue;
background-image:url(../images/teststip.gif);
background-repeat:no-repeat;
background-position:top;
color:#ffffff;
font-weight:bold;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:183px;
}
.rightbox3 {
float:right;
}
#bottombox {
height:80px;
width:535px;
margin-top:10px;
border:1px solid orange;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
/* BEGIN MENU */
#nav,#nav li,#nav li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav {
position: relative;
width:750px;
min-height: 3.1em;
height:auto;
margin:0;
font-size: .8em;
top: 0;
}
#nav li {
margin: 0 0 0 2px;
padding: 0;
width:100px;
float:right;
text-align:center;
font-weight: bold;
color:#444;
}
#nav a {
display:block;
color:#999999;
text-decoration:none;
background: url(inactive.gif) no-repeat;
background-image: url(inactive.gif);
background-repeat: no-repeat;
background-position: top left;
margin:0;
position: relative;
font-weight: bold;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
top: 0;
line-height: 1.4em;
}
#nav a:hover {
/*color:#334C99;*/
color:#777777;
}
ul#nav li a.here {
background: url(active.gif) no-repeat;
z-index: 310;
position: relative;
margin-bottom: -1px;
color:#334C99;
}
ul#nav li a.he hover {
color:#334C99;
}
ul#subnav {
width:750px;
min-height: 23px;
height: 1.7em;
background:url(subnav_background.gif) repeat-x;
/*border-top:1px solid #efefef;*/
border-top:1px solid #CECECE;
text-align:right;
padding:0 2px 0 0;
clear:both;
z-index:290;
position:absolute;
margin: 0;
right: 0;
top: 1.34em;
}
/* hide from IE/Mac \*/
* html #nav {
height: 3.1em;
wid\th:752px;
lef\t: 1px;
}
* html #nav a {
height: 1%;
}
* html ul#subnav {
wid\th:753px;
}
/* end hide */
#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0 /*3px 0 1px*/;
padding: 0;
float:left;
line-height: 1.4em;
/*width:auto;*/
width:50px;
}
ul#subnav li a {
font-family:Verdana, Arial, Helvetica, sans-serif;
/*font-weight:600;*/
font-size:9px;
margin-top:3px;
color:#666666;
background-image:url();
border-left:1px solid #cccccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logohead"> </div>
<div id="toplinks" align="right"><img src="images/arrows2.gif">Client Login</div>
</div>
<ul id="nav">
<li><a class="a3" href="#">About</a></li>
<li><a class="a2" href="#">Tools</a></li>
<li><a class="a1" href="#">Text</a></li>
<li><a class="a0 here" href="#">Home</a>
<ul id="subnav"><li> </li></ul>
</li>
</ul>
<div id="midbanner">Flash Banner Here</div>
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox"><img src="images/bluearrows2.gif"> </div>
<div class="leftbox"><img src="images/bluearrows2.gif"> </div>
<div class="leftboxBottom"><img src="images/bluearrows2.gif"> </div>
</div>
<div id="rightboxes">
<div class="rightbox1">1</div>
<div class="rightbox3">3</div>
<div class="rightbox2">2</div>
<div id="bottombox">4</div>
</div>
</div>
</div><!--end Wrapper-->
</body>
</html>
Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much moved on.... Hi, I'm new to using forums, and need a little help trying to fix an IE6 problem. My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6. Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div. The widths and padding for all of the 5 divs equals 956px's But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div. As you can see i have tried using line height:0; and that did not help. Here is my code...........Any idea's HTML: <div id="lower-links"> <div id="lower1"></div> <div id="lower2"></div> <div id="lower3"></div> <div id="lower4"></div> <div id="lower5"></div> </div> CSS: #links { margin:0; padding:0; background-color: #FFFFFF; width: 956px; height:374px; float: right; line-height:0; } #lower1,#lower3 { background-color: #FFFFFF; width: 161px; height:308px; float: left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower2,#lower4 { background-color: #FFFFFF; width: 162px; height:308px; float:left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower5 { background-color: #FFFFFF; width: 160px; height:308px; float: right; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } So I made a test design for a site, which I uploaded for testing HERE. The problem is that for a few borders to the navbar and such, an image needed to overlap them, so instead I made them very short div's and cut the image to fit inside the div, about 2px in height. Although this displays fine in firefox, in IE the small images do not show. At first it looked even worse in IE, until I implemented overflow: hidden; to make the div shrink to its actual size. Any recommendations? Is there a better way to do this, or an easy fix? Thanks in advance Howdy folks. If you check http://www.clansunited.net/ and http://www.clansunited.net/phorum/read.php?55,20178,20178#20178 you will notice that it doesnt really appear as it should as in IE. Now there are 2-3 small minor errors left otherwise everything is valid. How do I make the space between the menu and the rest of the site appear as in IE without messing it up in IE? Any feedback is welcome. Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out? www.etwcweb.com/ETWC.html Here is the CSS code also: Code: /* Main Part */
body {
font-family: Arial, Helvetica, sans-serif;
background: #333333 url(Images/mainbacknew.png) repeat-y;
font-size: 14px;
margin: 0px;
}
h1 {
font-size: 115%
font-weight: bold;
color: #000000;
}
p, ol, ul {
line-height: 145%
}
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}
ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}
img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}
hr {
display:none;
}
/* Floating part of Page */
#main_content {
width: 800px;
margin: 0pt auto;
background: url(Images/bg_content.jpg) repeat;
}
#main_content a {
color: #000000;
text-decoration: underline;
}
#main_content a:hover {
color: #666666;
}
/* The Top Picture */
#top_area {
background: url(Images/CSSHeader.png);
height: 433px;
width: 100%;
}
#top_area li {
display: block;
}
#top_area a {
color: #FFFFFF;
display: block;
float: left;
padding: 40px 20px 0pt;
text-decoration: none;
}
/* Search Form */
.search {
float: right;
padding-right: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.search h1 {
color: #FFFFFF;
font-size: 150%;
}
/* Top Links */
#main_links {
/* background-color: #000000;
opacity: 0.7; */
width: 800px;
margin: 0pt auto;
}
#main_links ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;
}
/* Right Side of Floating Page */
#stories {
background: transparent url(Images/bg_content.jpg) repeat;
width: 535px;
padding: 30px;
float: right;
margin: 0pt auto;
}
#stories h2 {
padding-left: 20px;
padding-top: 15px;
}
/* Left Side */
#left_bar {
background: transparent url(Images/bg_content.jpg) repeat;
float: left;
width: 205px;
margin: 0pt auto;
}
.left {
padding-right: 10px;
padding-top: 0px;
}
.left_list {
padding: 20px;
}
.left_list ul li {
border-top: 1px solid #CCCCCC;
padding: 10px 15px;
}
#left_bar h1 {
background: url(Images/LeftHeaders.png) repeat-x;
padding-left: 20px;
padding-top: 5px;
color: #FFFFFF;
}
/* Message */
#top_footer {
width: 800px;
margin: 0pt auto;
background-color: #666666;
color: #FFFFFF;
font-size: 90%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
line-height: 150%;
}
/* Bottom Links */
#links {
width: 800px;
margin: 0pt auto;
text-align: center;
background: #000000;
color: #FFFFFF;
font-size: 90%;
line-height: 160%;
padding-top: 8px;
padding-bottom: 3px;
}
#links a, #links a:hover {
text-decoration: none;
font-weight: bold;
}
#links .contact {
}
#links .contact a, #links .contact a:hover {
text-decoration: underline;
color: #0000CC;
}
Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three Hi Guys, Hope someone can help out here.. I am trying to create a page with a header and footer and a middle portion for the content. I am not used to using CSS and I thought I had it working but when I test in IE it doesn't quite work as expected.. The footer removes itself from the bottom of the page and the scrollbars for the maincontent extend below the footer.. You'll see what I mean if you open this in IE: http://www.modelglamorous.com/div_test.htm http://www.modelglamorous.com/css/mainstyle.css It works perfectly in Firefox but not in IE.. I think it's something simple but I am not sure how to fix it.. TIA, N. im making a panel with rounded corners just 4 divs , topLeft, topRight etc... i have them inside 1 container div that is 80% width, the 4 corner div's are all 50% width and 50% height it's all floated left and theres a <BR> between the top en bottom section but it works only in firefox...in IE they just line up below eachother unless i make the width of them 49%....so wheres the 1 ****ing % ? hey just got a small problem i dont know hw to fix, take a look at my site http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Hi everyone I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage. It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action. Many thanks Hi! In this page [www].bezlica.ru/chat/sample.php , left bottom flash window is 3 pixels up of its normal position. In Firefox it renders well. Is there any way to fix in IE, while not affecting Firefox? Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug? h**p://www.topofferspage.com Hey, I'm new to this board and CSS design in general. I have a question that I couldn't figure out or find anywhere. projecthoods. com/clients/bpa (minus the space before com) (FF) Although I set the div width to 666 (not intentional), why is the background color only appearing in IE? FF doesn't display the bg. I'm assuming it has something to do with the unordered list, because it all works fine if I replace the list with text, however, I can't find a solution because I need the list in there. Any ideas? Thanks guys. CSS Code: body
{
margin: 0 0 0 4em;
padding: 0;
background: #384c7f url(images/bg.gif);
font-family: Verdana,Arial,"Times New Roman",sans-serif;
font-size: small;
color:#484848;
text-align: justify;
}
a:link
{
color: #384c7f;
}
a:visited
{
color: #384c7f;
}
a:hover
{
color: #6173a3;
}
ul
{
margin: 0 0 0 25px;
}
h3
{
font-family: Georgia,"Times New Roman",Verdana,sans-serif;
margin: 0 0 0 0;
}
#header
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#eprnavigation
{
color: #f2f2f2;
background: #4b5f92;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 666px;
}
#nav a
{
color:#f2f2f2;
background: #4b5f92;
text-decoration: none;
font-weight: bold;
padding: 5px 5px 5px 5px;
}
#nav a:hover
{
color: #f2f2f2;
background: #6173a3;
padding: 10px 5px 10px 5px;
}
#nav
{
list-style: none;
color: #f2f2f2;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: .8em;
background: #4b5f92;
width: 666px;
}
#nav li
{
float: left;
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
color: #f2f2f2;
background: #4b5f92;
}
#content
{
background: #e5e5e5;
color:#484848;
width: 666px;
margin: 0 0 0 0;
}
#footer
{
background: #6173a3;
height: 15px;
width: 656px;
color: #f2f2f2;
font-size: .7em;
padding: 5px 5px;
text-align: center;
}
acronym
{
color: #4a5c8b;
background: #e5e5e5;
border-bottom: 1px dotted;
cursor: help;
}
/* Finish Style Formatting */
/* Start Layout Structuring */
#picture
{
text-align: center;
}
#footer
{
clear: both;
}
#left
{
padding: 10px;
float: left;
width: 200px;
}
#right
{
padding: 10px;
float: right;
width: 400px;
}
/* End Layout Structuring */
http://lovemeforme.org if you notice, right under the main image, you will see the two purple boxes (under the header and above the content and sidebar).. I don't know how to get rid of them. It has to do with the content and sidebar div's, because when I take out the background color it goes away, but... I can't figure out what to do, i've tried everything. Thanks in advance Hi, I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out. http://donimusic.com/test/ In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF). Thank you kindly for your help. Stacey I've got three issues with my CSS on my page that I cannot seem to figure out. I'm stumped again. Any help would be appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title></title>
<style type="text/css" media="screen"><!--
body { background-color: #fff; background-image: url(../images/top_bar_striped.gif); background-repeat: repeat-x; margin: 0; padding: 0 }
hr { color: #ccc; background-color: #ccc; width: 100%; height: 1px; border: 0 }
#container { background-color: #fff; margin: 0 auto; width: 950px }
#main { margin: 0 auto; padding: 0; width: 938px }
#top { margin-bottom: 6px; height: 40px }
#nav { height: 40px }
#banner { height: 212px; overflow: hidden }
#body { background-image: url("../images/body_back.gif"); background-repeat: repeat-y; margin-top: 6px; overflow: hidden }
#bodyLeft { background-image: url("../images/body_left_top_back.gif"); background-repeat: no-repeat; padding: 30px 20px 20px; width: 200px; min-height: 100px; float: left }
#bodyLeft ul { color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: right; list-style-type: none; margin-left: 0; padding: 0 }
#bodyLeft li { margin: 12px 0 }
#bodyLeft li a { color: #333; text-decoration: none; padding: 4px 6px }
#bodyLeft li a:hover { background-color: #a5a687 }
#bodyRight { background-image: url("../images/body_right_top_back.gif"); background-repeat: no-repeat; padding: 40px 30px 30px; width: 632px; min-height: 100px; float: right }
#introHeading { color: #32508a; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 22px }
#introText { color: #333; font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px }
#introPullout { color: #c00; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 28px; background-image: url("../images/quote_back.gif"); background-repeat: no-repeat; margin-bottom: 30px; margin-left: 30px; padding-left: 20px; width: 180px; float: right }
#featuredProject { margin-top: 30px; clear: both }
#featuredPhoto { margin-right: 20px; margin-bottom: 20px; float: left; border: solid 8px #fff; outline: solid 1px #ccc }
#featuredTitle { color: #333; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-image: url("../images/featured_arrow.gif"); background-repeat: no-repeat; margin: 0 0 10px; padding: 0 0 0 12px }
#featuredText { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px }
#footer { background-image: url("../images/body_btm_back.gif"); background-repeat: no-repeat; height: 24px }
#copyright { color: #666; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 14px; text-align: right; padding: 20px }
--></style>
</head>
<body>
<div id="container">
<div id="main">
<div id="top">
<div id="nav"></div>
</div>
<div id="banner"></div>
<div id="body">
<div id="bodyLeft">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="bodyRight">
<div id="introPullout">
<p>Text here...</p>
</div>
<div id="introHeading">
<p>Text here...</p>
</div>
<div id="introText">
<p>Text here...</p>
</div>
<div id="featuredProject">
<img id="featuredPhoto" src="photo.jpg" alt="" width="130" border="0"/>
<div id="featuredTitle">FEATURED PROJECT</div>
<hr/>
<div id="featuredText">Text here...</div>
</div>
</div>
</div>
<div id="footer"></div>
<div id="copyright"></div>
</div>
</div>
</body>
</html>
1. How do I make the background color for the links (bodyLeft li a:hover) in the bodyLeft DIV fill the entire width of the DIV? Minus the padding, of course. 2. The text/DIVs inside the bodyRight DIV appear to have too much space above them in Safari (appear too far down). It looks like IE is correct. Any ideas? 3. The text in DIV featuredTitle is supposed to have an arrow on its left side where the text would normally start. It doesn't appear and/or looks like the featuredPhoto is covering it up. How can I make the arrow (background image) appear in the correct spot and slide the text over to the right? Thank you for all your help! Hello, I couldn't think of a more appropriate title, so I apologize - but as it says, I have a series of small questions regarding my CSS layout and would be most grateful if someone could assist me. I'll start with the biggest one. (See Image) http://img379.imageshack.us/img379/9779/46432769lm3.png As you can see, when viewing my layout in Google Chrome or Safari, everything in between the header and the footer gets caught on my top menu. I tried to correct it, but I am really unaware of the problem's source; if anyone knows I'd appreciate it. The topmenu CSS is he Code: .topmenu {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
width:898px; border:solid 1px #363636;
clear:both;
}
.topmenu a, .topmenu a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
text-decoration: none;
}
.topmenu ul {
list-style-type:none;
padding:0;
margin:0;
}
.topmenu ul li {
float:left;
position:relative;
z-index:auto !important /*Non-IE6*/;
z-index:1000 /*IE6*/;
border-right:solid 1px #363636;
}
.topmenu ul li a {
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
float:none !important /*Non-IE6*/; float:left /*IE-6*/;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.topmenu ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
}
.topmenu ul li:hover a {
background-color:#008000;
text-decoration:none;
color:#FFFF00;
}
.topmenu ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.topmenu ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #363636;
border-bottom: solid 1px #363636;
background-color:#0000FF;
color:#FFFFFF;
}
.topmenu ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00;
}
.topmenu table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
}
.topmenu ul li a:hover {
background-color:#008000;
text-decoration:none;
color:#FFFF00;
}
.topmenu ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px; left:0;
}
.topmenu ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em; padding:4px 16px 4px 16px;
border-left:solid 1px #363636;
border-bottom: solid 1px #363636; background-color:#0000FF;
color:#FFFFFF;
}
.topmenu ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00;
}
The next two things aren't really significant. (See Image) http://img73.imageshack.us/img73/1725/50804367ww7.png (Shown in red) If possible, I would like to remove that space in the center column and expand the width of the blockquote section in my sidebar, but I can't seem to find out how. Website: http://banjouniverse.110mb.com/css2.php CSS: http://banjouniverse.110mb.com/master2.css |
|||||||