|
CSS - Layout Gap In Ff Driving Me Nuts
Please visit this page -
http://www.tmhdesign3.com/real-estate-broker.asp See the gap, about 10px, on the page just below the header? For the life of me I can't get rid of it in FF. I opened Firebug and specified a top:-10px on the content div and it closes the gap. BUT, when I open my css file on the server and chagne that spec and then open the page I still have the gap??? Thanks for any help. Similar TutorialsTake a look at this page http://www.gameworldx.com/test.html I removed most of the html exept the part giving me problems, but all of the CSS is there. You will see a blue bar(footer) and the white bar (bottom). Both of the links are blue and bold. Why? I have no idea. That is the problem. I noticed that is I remove the CSS for one div or the other, the opposite div shows correctly, but I dont know why it does that. Can anyone see any problems? It's really late, and I am tired, so its gotta be a really stupid mistake. Thanks! If it works in Netscape, it will not work in IE If it works in IE, it will not work in Netscape. Soo, what am I to do? Okay, Im trying to make a table bg have an opacity of 40%. I've gone over the net to figure out the problems, knowing that filter:alpha{} is not recognized by Netscape. So, I found some information to help overcome Netscape woes, and now the opacity isn't work in IE. I need help before I rip all my hair out. So below is what Im working with. Code:
<html>
<head>
<style type="text/css">
#menu {
background-color: #FFFFFF;
filter: alpha(opacity=40);
filter: progid;:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
position:relative; top:0;
}
.tdbg {
background-color: #FFFFFF;
filter: Alpha(Opacity=40);
}
</style>
</head>
<body>
<table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
<tr>
<td align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdbg">FOO</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><div id="menu">FOO</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
So, basically the top cell is "correct" in IE, but the bottom cel is not. And opposite for Netscape (7.0+) How can i fix it so its the same for both browsers? http://wrath.wr.funpic.org Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why? When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up. Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE. Thanks a lot. I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css. I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues. Here is the site(im new, i cant post URLs): http://aeroprepare.com You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS. here is my CSS: Code: /*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: baseline;
}ul {list-style: none;}table { border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}
/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
font-size:12px;
background-color:#fff;
}
#hm_background, #background {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-340px;
}
#hm_background {
background-repeat:repeat-x;
background-position:top;
}
#background {
background-repeat:repeat-x;
background-position:top;
}
.clear {
clear:both;
}
.clear-border {
margin:15px 0 15px 0;
clear:both;
border:1px solid #dbdbdb;
}
#wrapper {
margin:0 auto;
width:960px;
}
#logo {
float:left;
margin:27px 0 0 0;
width:284px;
height:67px;
}
#logo_home {
float:left;
margin:32px 0 0 45px;
width:212px;
height:52px;
}
/*** navigation ***************************************************************/
#nav_wrap {
position:relative;
margin:25px 0 0 460px;
padding:12px 0 0 15px;
background-repeat:no-repeat;
width:464px;
height:52px;
z-index:99;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
margin:0;
padding:0;
}
#nav li a {
position: relative;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 37px;
text-decoration: none;
color: #fff;
font-size:12px;
z-index: 2;
}
#nav li a span {
display: block;
line-height: 21px;
padding: 3px 0 5px 20px;
color: #fff;
}
#nav_hover {
position: absolute;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 28px;
z-index: 1;
}
#nav_hover span {
display: block;
padding: 3px 0 5px 20px;
line-height: 21px;
height: 28px;
z-index: 1;
}
/*** Dropdown ***/
#nav ul {
position:absolute;
display:none;
padding:0 0 12px 0;
width:142px;
top:48px;
list-style-type:none;
z-index:99;
}
#nav li ul li {
margin:0;
padding:0;
}
#nav li ul a, #nav li ul a:visited {
float:left;
padding:4px 0 0 12px;
width:130px;
height:20px;
font-weight:normal;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:142px;
margin:0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
/*** footer *******************************************************************/
#footer_wrap, .push {
height: 360px;
clear: both;
}
#footer_wrap {
background-color:#e5e5e5; /*e5e5e5*/
border-top:1px solid #B3BCBF;
}
#footer {
margin:0 auto;
padding:12px 0 0 40px;
width:920px;
}
#footer a {
text-decoration:none;
}
.foot_clm_block {
float:left;
margin:25px 15px 15px 0;
width:165px;
}
.foot_clm_heading {
margin:0 0 5px 0;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.foot_clm_block ul {
margin:0;
padding:0;
list-style-type:none;
}
.foot_clm_block ul li {
color:#7F7F7F;
}
.foot_clm_block ul li a {
display:block;
padding:5px 0 0 5px;
height:20px;
color:#fff;
border-bottom:1px solid #CDCDCF;
font-size:12px;
}
.foot_clm_block ul li a:hover {
color:#4E4E4E;
}
#search_form_footer {
margin:5px 0 10px 1px;
height:24px;
border:1px solid #fff;
background-color:#fff;
}
#search_footer {
float:left;
padding:3px;
width:120px;
border:none;
}
#social_icons {
margin:5px 0 0 6px;
}
#social_icons a {
margin:0 4px 0 0;
}
#copyright_wrap {
border-top:1px solid #f1f1f1;
height:40px;
}
#copyright_txt {
margin:0 auto;
margin-top:10px;
width:880px;
color:#fff;
font-size:11px;
}
#copyright_txt a {
color:#fff;
font-size:11px;
}
/*** home page ****************************************************************/
#hm_header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#slider {
margin:0 0 0 23px;
padding:10px 0 0 33px;
background-repeat:no-repeat;
width:881px;
height:298px;
}
#slider_imgs img {
display:none;
}
#news {
margin:15px 0 10px 25px;
background-image:url(../images/news_back.jpg);
background-repeat:no-repeat;
width:911px;
height:65px;
overflow:auto; /* fixes margin collapsing */
}
#news_icon {
float:left;
margin:17px 0 0 17px;
background-image:url(../images/airplaneminilogo.png);
background-repeat:no-repeat;
width:55px;
height:41px;
}
#news_text {
margin:20px 0 0 15px;
float:left;
font-size:20px;
text-align:left;
width:800px;
}
#news_text ul {
margin:0;
padding:0;
list-style-type:none;
}
#news_text a {
text-decoration:none;
}
#three_columns {
margin:0 0 0 25px;
background-image:url(../images/3column_back.jpg);
background-repeat:no-repeat;
width:910px;
}
.three_clm_block {
float:left;
margin:25px 0 45px 0;
padding:0 25px;
width:250px;
height:200px;
background-image:url(../images/3column_border.jpg);
background-repeat:no-repeat;
background-position:top left;
}
.three_clm_circle {
float:left;
padding:6px 0 0 0;
width:32px;
height:26px;
background-repeat:no-repeat;
background-position:top left;
color:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
}
.three_clm_title a {
float:left;
padding:5px 0 0 8px;
font-size:20px;
text-decoration:none;
}
.three_clm_text {
padding-top:7px;
clear:both;
line-height:19px;
}
/*** portfolio ****************************************************************/
#port_title h1 {
margin:15px 0;
font-size:34px;
font-weight:normal;
}
#port_wrap {
padding:32px 0 0 0;
}
.port_block {
float:left;
margin:0 22px 22px 0;
padding:7px;
background-color:#d6d9da;
border:1px solid #a7a9a9;
width:426px;
height:346px;
}
.port_img {
position: relative;
border:1px solid #fff;
background-color:#fff;
width:425px;
height:324px;
}
.port_txt {
position: absolute;
top: 110px;
left: 0;
padding:2px 0 0 10px;
width:240px;
height:18px;
background-color:#fff;
}
.port_mag_img {
position: absolute;
top: 10px;
left: 81px;
}
.port_txt a {
font-weight:bold;
text-decoration:none;
}
.port_img img {
border:none;
}
/*** blog / static page *******************************************************/
#header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#breadcrumb {
padding:15px 0 0 0;
height:25px;
color:#fff;
font-weight:bold;
}
#breadcrumb a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
/*** sidebar ***/
#sidebar {
float:left;
margin:25px 0 0 0;
width:220px;
}
.sidebar_block {
margin:0 0 35px 0;
}
.sidebar_heading {
font-size:18px;
border-bottom:5px solid #d6d9da;
color:#23353e;
}
#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}
#sidebar ul li a {
display:block;
padding:4px 0 0 30px;
height:21px;
border-bottom:1px solid #d6d9da;
text-decoration:none;
color:#B3BCBF;
background-image:url(../images/bullet_arrow.jpg);
background-repeat:no-repeat;
}
#sidebar ul li ul li a {
padding:4px 0 0 54px;
background-image:url(../images/bullet_arrow_sub.jpg);
background-repeat:no-repeat;
}
#sidebar a:hover {
color:#959D9F;
}
#search_form {
margin:5px 0 0 1px;
width:216px;
height:24px;
border:1px solid #d6d9da;
background-color:#fff;
}
#search {
float:left;
padding:3px;
width:180px;
border:none;
}
.search_btn {
float:right;
margin:1px 0 0 0;
background-image:url(../images/search_icon.jpg);
background-repeat:no-repeat;
background-position:center;
border:none;
background-color:transparent;
cursor:pointer;
width:25px;
height:22px;
}
/*** content ***/
#content {
float:left;
margin:25px 0 0 55px;
width:645px;
}
#contentblog {
float:left;
margin:25px 0 0 55px;
width:100%;
}
#content_full {
float:left;
margin:25px 0 0 0;
}
.post_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom:1px solid #d6d9da;
}
#page_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
#page_title h1 {
margin:0 0 5px 0;
padding:0;
font-size:34px;
font-weight:normal;
}
#content h1 a {
font-size:34px;
font-weight:normal;
}
.post_meta {
height:20px;
font-weight:bold;
color:#929393;
}
.post_meta a {
text-decoration:none;
font-weight:bold;
color:#929393;
}
.post_img {
padding:7px 0;
margin:10px 0;
border-top:1px solid #d6d9da;
border-bottom:1px solid #d6d9da;
}
.post_txt {
line-height:20px;
color:#23353e;
}
.post_txt img {
padding:3px;
border:1px solid #b3b3b3;
}
.onethird {
padding: 0 0 0 15px;
float:left;
width:30%;
}
.onehalf {
padding: 0 0 0 15px;
float:left;
width:47%;
}
.twothirds {
padding: 0 0 0 15px;
float:left;
width:64%;
}
.post_readmore {
margin:5px 0 0 0;
}
.post_readmore a {
text-decoration:none;
font-weight:bold;
color:#23353e;
}
#pagination {
margin:15px 0;
height:32px;
}
#pagination ul {
margin:0;
padding:0;
list-style-type:none;
}
#pagination ul li { float:left;}
#pagination ul li a {
float:left;
margin:0 5px 0 0;
padding:8px 0;
width:31px;
height:23px;
color:#fff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(../images/pagination.jpg);
background-repeat:no-repeat;
}
#pagination ul li a.active, #pagination ul li a:hover {
background-image:url(../images/pagination_active.jpg);
background-repeat:no-repeat;
}
/*** comments *****************************************************************/
#comments {
margin:0 0 40px 0;
}
.comm_block {
padding:25px 0 25px 0;
border-bottom:1px solid #e7e7e7;
}
.comm_avatar {
float:left;
padding:3px;
width:50px;
height:50px;
background-color:#fff;
border:1px solid #e7e7e7;
}
.comm_meta {
float:left;
margin: 0 0 0 20px;
width:550px;
}
.comm_author {
font-size:16px;
}
.comm_text {
float:left;
margin: 0 0 0 20px;
width:564px;
line-height:18px;
}
.comm_even {
background-color:#fff;
}
#comm_form {
margin:20px 0;
}
/*** contact ******************************************************************/
#contact_txt {}
#google_map {
margin:5px 0;
border:1px solid #b3b3b3;
}
#contact_form {
margin:20px 0;
}
.err {
color:#BF2323;
}
/*** forms ********************************************************************/
.form_tb {
padding:3px;
width:400px;
height:18px;
border:1px solid #b3b3b3;
color:#254A59;
}
.form_ta {
padding:3px;
width:639px;
height:150px;
border:1px solid #b3b3b3;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#254A59;
}
.form_btn {
padding:5px 7px;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#fff;
border:none;
background-color:#fff;
cursor:pointer;
background-repeat:no-repeat;
width:114px;
height:33px;
}
/*** global *******************************************************************/
ul {
padding:0 0 0 30px;
list-style-type:square;
}
ol {
padding:0 0 0 30px;
}
a {
color:#03181F;
}
p {
margin:0 0 10px 0;
}
h1 {
margin:0 0 15px 0;
font-size:34px;
font-weight:normal;
}
h1 a {
text-decoration:none;
}
h2 {
margin:0 0 7px 0;
font-size:24px;
font-weight:normal;
}
h3 {
margin:0 0 5px 0;
font-size:18px;
font-weight:normal;
}
h4 {
margin:0 0 5px 0;
font-size:16px;
font-weight:bold;
}
h5 {
margin:0 0 3px 0;
font-size:14px;
font-weight:bold;
}
blockquote {
margin:20px 0 20px 30px;
padding:0 10px;
border-left:5px solid #dbdbdb;
}
strong {
font-weight:bold;
}
.hidden {
display:none;
}
.noborder {
border:none;
}
.noimage {
background-image:none;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
view page source to see the home page. I dont have the footer in an incorrect div (that i can see) Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections... If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer.... PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant. Hey, What's messing me around is trying to have three tables next to each other in a row, like; Code: <div style="float:left:"></div> <div style="float:left; width:100px;"></div> <div style="float:left; width:100px;></div> Say someone is viewing the website with a 1000px width resolution. I want the first table to expand to 800px and the last two tables to take up their 200px. I can't seem to get this working. If I add width:100%; to the first table it takes its own row and pushes the other two div's below it. Is there a CSS property to make it take up 100% of the availible space, without pushing the other div tables to the row below, unless the contents of the first table would force a horizontal scroll bar? (i.e if the first table contents can't be shrunk any more, but the user still shrinks their browser width, then it pushes the two other div's below to avoid a scroll bar) Thanks for your time, -Ross Isn't there an automatic way (w/o javascript) to change the class of a menu item if they're on the selected page? I could have sworn there was an easy way to make a menu item highlight if the user was on that page..... But then again, maybe im nuts... Thanks. In my style-sheet, I have something like this #mainnav UL LI { height:50px; vertical-align: middle; (i tried center also) text-align: center; } What I want the text to sit half-way down the 50 height... http://www.rodoslovlje.com/ Use IE e.g. Does anyone know how I can fix this. Thnx I feel like I am going backwards instead of forward. I have made many changes to the layout trying to achieve what I want I had something close, but it was for a fixed height for the main page layout box and I needed something that will be a min height of 600px but will stretch if the content exceeds that. So now after reading many tutorials on boxes, blocks, layouts, floats, etc. I am actually further from acheiving my goal (I think). I feel like I am losing my mind trying to figure it out I have made each major box a different color for purposes only of trying to get the layout right and figuring out what each element is actually doing - so ignore all the funky colors. I tried using a background image to create a faux side column (hot pink border) that I hoped would do the trick - however, I can't even get it to show up. I realize there has got to be something I am over looking - but what??? I tried using the css toolbar helper - the bg image is outlined but not showing up?? There are no broken images either ??? Click here to see the page So here is my css: Code:
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 100%;
background-color: #660099;
padding-top: 10px;
position: relative;
}
#sideColumn {
float:left;
width:155px;
height: 100%;
background: url(images/blue.gif) repeat-y;
border: 1px solid #FF00FF;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
margin-left: 175px;
background-color: #99FF00;
}
Here is my xhtml: Code: <body>
<!--begin page -->
<div id="page">
<!--begin header -->
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span> </div>
<!--end of header -->
<!--begin topbar -->
<div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li><a href="other_regions.html">Other Regions</a></li>
</ul>
</div>
<!--end topbar -->
<!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn"> <span class="category">Products</span>
<ul>
<li><a href="products/spirometers.html">Spirometers</a></li>
<li><a href="products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="resources/customer_support.html">Customer Support</a></li>
<li><a href="resources/training_services.html">Training & Services</a></li>
<li><a href="resources/exhibitions.html">Exhibitions</a></li>
<li><a href="resources/newsletters.html">Newsletters</a></li>
<li><a href="resources/downloads.html">Downloads</a></li>
<li><a href="resources/useful_links.html">Useful Links</a></li>
<li><a href="resources/industry_information.html">Industry Information</a></li>
<li><a href="resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p class="home">Vitalgraph offers a wide range of spirometers along
with other asthma management equipment with over 40 years experience.
From simple hand-held units to sophisticated Windows based spirometry
systems, we have it all. Check out our full line of respiratory equipment
under the product category.</p>
<p class="home"><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable --> </div>
<!--end of main column -->
</div>
<!--end of wrapper-->
</div>
<!--end of white border -->
</div>
<!--end of page -->
</body>
Hello, I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color. Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it. I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work. Thanks! Randy This is an simple example: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}
#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}
#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}
#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}
#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}
li {
list-style:none;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html>
I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hi, I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment. I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height. Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me. Any help would be greatly appreciated. Thanks, Steph Hi - I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain. The website works fine in Firefox and Safari, and almost all the pages work fine in IE. The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari. It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP. The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place. If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code. It would be greatly appreciated if you could let me know if you would like to help me out. I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all. Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member. Hi everyone! I've been struggling with a few problems with a new site I have just developed in HTML5 and CSS3... These problems only occur in IE8 (and compatibility mode of)...I have IE9 installed and I can't reproduce any of the problems when I use compatibilty mode, however when I use IE Tester I can view the issues...which are.... 1. When I click on a link in the footer or in the top of the header (home/contact) they are assigned 'visited' class but this makes them higher than the other links in the list... could this be anything to do with the 'nav' styling? 2. I can't produce bottom borders in the sub menus of the main navigation - I have tried removing padding, setting relative/absolute positioning and z-index values as has been suggested in other resources and nothing works!!! If anyone can give me any help at all...or if you need any further information or access to my style sheets etc please let me know - I will really appreciate it! Thanks in advance...Rachel Here is my website... in progress... xygps .com .au See my wrapper border extending up into the header at the top? I want this hidden under the header backgrounds. I have been messing around with z-index for ages with no luck... can anyone point me in the right direction?? sorry, this is probably a super newbie question but I just can't work it out!! Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it /* Style for Entries in Category View (Cards View) */ /* -------------------------------------------------------- */ table.sobi2Listing { } table.sobi2Listing td { vertical-align: top; float: left; height: 1%; width: 97%; } /* new */ div.vcard_item { margin: 1px 0px 2px 0; padding: 6px; width: 97%; border:1px solid #dddddd; background-color:#fbfaf2; -moz-border-radius: 5px; The actual page is findawebsitedesigner.info/directory-2.html If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help. Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page: Code: <body> <div id="issingle"> <div id="container"> <div id="sitename"> <a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a> </div> <div id="mainmenu"> <ul> <!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>--> <li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li> <li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li> <li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li> <li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li> <li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li> <li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li> <li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li> </ul> </div> And here is the css pertaining to that code: Code: body {
background:#fff;
color:#303030;
font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
margin:0 auto;
padding:0;
text-align:center;
width:850px;
}
#container {
position: relative;
background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
color:#303030;
border:1px solid #C8C8C8;
margin:10px;
/* padding:10px;*/
text-align:left;
height:598px;
}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
position: absolute;
right: 10px;
top: 27px;
margin-right: 5px;
}
#mainmenu li.page_item {
float:left;
/* height:35px;*/
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
border-right:1px solid #b0b0b0;
color:#808080;
display:block;
margin: 0;
padding: 1px 8px;
text-transform:lowercase;
}
Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all. Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info. Thank you!! J |
|||||||