|
CSS - Please Help - Website Not Displaying Correctly On Older Versions Of Ie
I just finished modifying an open CSS/XHTML webpage and it displays perfectly on IE7.
When the page is viewed on other IE versions, it is completely jumbled (i.e. footer at top of page, hover boxes on navigation bar take up whole screen, borders exceed defined 1000px, etc.) I am a novice at CSS and am having difficulty fixing these issues. Any help would be greatly appreciated. I'v attached screen shots of the correct and incorrect layouts. I have 2 css formatting files: setup and text Here's SETUP.CSS: /* NON-HEADER */ *{padding:0; margin:0;} body {font-size:62.5%; background:rgb(250,250,250) url(../img/bg_sides.gif); font-family:Verdana,arial,sans-serif; margin-bottom:40px} /*Font-size: 1.0em = 10px when browser default size is 16px*/ .page-container {width:1000px; margin:0px auto; margin-bottom:25px; font-size:1.0em;} .page-footer {width:1000px; margin:0px auto; margin-top:20px; margin-bottom:10px; font-size:1.0em; text-align:center;} .main {clear:both; width:1000px; padding-bottom:30px; background:rgb(255,255,255); top left repeat-y;} .main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:940px; margin:30px 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {clear:both; width:1000px; padding:1.0em 0 1.0em 0; background:transparent; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} /* --- For alternative headers START PASTE here --- */ /* HEADER */ .header {width:1000px; font-family:"TREBUCHET MS",arial,sans-serif;} .header-top {width:1000px; height:100px; background:rgb(195,0,0); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:1000px; height:30px; background:transparent; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:1000px; height:300px; background:rgb(204,0,0) repeat-y;} .header-breadcrumbs {clear:both; width:1000px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;} /*******************/ /* HEADER SECTION */ /*******************/ .sitelogo {width:400px; height:100px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); } .sitepic {width:1000px; height:300px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }.sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .sitename h1 {font-size: ;} .sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;} .sitename a {text-decoration:none; color:rgb(125,125,125);} .sitename a:hover {text-decoration:none; color:rgb(50,50,50);} .nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;} .nav0 ul {float:right; padding:0 20px 0 0;} .nav0 li {display:inline; list-style:none;} .nav0 li a {padding:0 0 0 3px;} .nav0 a:hover {text-decoration:none;} .nav0 a img {height:14px; border:none;} .nav1 {width:350px; position:absolute; z-index:3; margin:10px 0 0 650px;} .nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;} .nav1 li {display:inline; list-style:none;} .nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(255,255,255); text-decoration:none; font-size:100%;} .nav1 a:hover {text-decoration:none; color:rgb(145,145,145);} .sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:30px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;} .sitemessage h1 {width:400px; text-align:right; font-size:230%;} .sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;} .sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;} .sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);} .sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);} /*Drop-down menu*/ .nav2 {float:left; width:1000px; border:none; background:transparent url(../img/nav-bar-main.jpg) no-repeat; color:rgb(255,255,255); font-size:110%;} /*Color navigation bar normal mode*/ .nav2 ul {list-style-type:none;} .nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; } .nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(255,255,255);} .nav2 ul li ul {display:none; border:none;} /*Non-IE6 hovering*/ .nav2 ul li:hover a {background-color:rgb(210,210,210); border: solid 1px rgb(130,130,130); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/ .nav2 ul li:hover ul {display:block; width:140px; position:absolute; z-index:999;} .nav2 ul li:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/ .nav2 ul li:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/ /*IE6 hovering*/ .nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;} .nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none; border: solid 1px rgb(130,130,130); color:rgb(80,80,80);} /*Color main cells hovering mode*/ .nav2 ul li a:hover ul {display:block; width:140px; position:absolute; z-index:999;} .nav2 ul li a:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/ .nav2 ul li a:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/ .header-top .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;} .header-top .searchform form fieldset {float:right; border:none;} .header-top .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; font-family:verdana,arial,sans-serif; font-size:120%; } .header-top .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:transparent url(../img/search-button.gif); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;} .header-top .searchform input.button:hover {cursorointer; background:transparent url(../img/search-button.gif);} /******************/ /* MAIN SECTION */ /******************/ /* MAIN CONTENT */ .column1-unit {width:950px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-left {float:left; width:600px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-left {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-middle {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:50px;} .column3-unit-right {float:right; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} /********************/ /* FOOTER SECTION */ /********************/ .footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;} .footer p.credits {font-weight:normal;} .footer a {text-decoration:underline; color:rgb(125,125,125);} .footer a:hover {text-decoration:none; color:rgb(0,0,0);} .footer a:visited {color:rgb(0,0,0);} /******************/ /* CLEAR FLOATS */ /******************/ .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clear-contentunit {clear:both; width:940px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);} Here's TEXT.CSS: /******************/ /* MAIN SECTION */ /******************/ /* MAIN CONTENT */ .main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"georgia",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;} .main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"georgia",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;} .main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"georgia",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;} .main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;} .main-content h3 {clear:both; margin:-.5em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;} .main-content h1.side {clear:none;} .main-content h2.side {clear:none;} .main-content h3.side {clear:none;} .main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:170%;} .main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-size:140%;} .main-content h6 {clear:both; margin:0 0 .25em 0; line-height:1em; font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:100%;} .main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;} .main-content p.center {text-align:center;} .main-content p.right {text-align:right; margin-right: 10px} .main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;} .main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;} .main-content table {clear:both; width:880px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);} .main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:110%;} .main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:110%;} .main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;} p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;} .main-content ul {list-style:none; margin:0.5em 0 1.0em 0;} .main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;} .main-content ol {margin:0.5em 0 1.0em 30px !important /*Non-IE6*/; margin:0.5em 0 1.0em 35px /*IE6*/;} .main-content ol li {list-style-positionutside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;} .contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);} .contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);} .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;} .contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;} .contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;} .contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);} .loginform {width:160px; margin:-10px 20px 0 20px;} .loginform p {clear:both; margin:0; padding:0;} .loginform fieldset {width:160px; border:none;} .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;} .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;} .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;} .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;} .loginform input.button:hover {cursorointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);} /********************/ /* COMMON CLASSES */ /********************/ .main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);} .main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid rgb(150,150,150);} .main img.right {clear:both; float:right; margin:3px 0 7px 10px; margin-right:10px; padding:1px; border:1px solid rgb(150,150,150);} .main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;} .main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;} .main a:hover {color:rgb(42,90,138); text-decoration:underline;} .main a:visited {color:rgb(42,90,138);} .main a img {border:solid 1px rgb(150,150,150);} .main a:hover img {border:solid 1px rgb(220,220,220);} Similar TutorialsI run http://www.licklinux.com and the site has been designed to fit most browsers. Such as Gecko (e.g. Firefox), IE, Opera, even Lynx e.t.c. Though in older versions of IE, the sidebar has an awfully ugly blank right-margin. I can't seem to fix this problem, and by viewing my stats 17% use these non-compatible browsers. Can someone please help me? I usually figure CSS problems out myself, but now I'm totally lost... Hi, I'm working on a full CSS-based layout: http://www3.telus.net/mguzman/testnewsite/ I just have a few questions though. Obviously, NN4, being the .... browser that it is won't really display CSS correctly at all - I've stuck in a DIV that is hidden using CSS that basically tells the user to upgrade to Mozilla or Opera. Is this considered good practice and professional? How else can one deal with standards-incompliant browsers like NN or IE? Please keep in mind that this layout may be used as a design for a business. Also, in IE 5.0 (5.5 seems okay) and IE 4.x, the page displays *mostly* correctly, except that the DIV with the content is shifted down till after the floated left menu. Any suggestions on how this can be solved while still maintaining compatibility with other platforms? In NN 6, it appears that the background (and/or background-image) CSS properties aren't supported. Generally, how is this issue dealt with? Thanks so much! ^^ I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong. I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari. Here is the link: http://gregsgoods.com/seestore.php In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it. Here is the CSS code: Code: html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {
color: #005B9C;
}
a:hover {
color: #0B2444
}
img {
border: 0;
}
body {
background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
color: #ccc;
font: normal 62.5% Tahoma,sans-serif;
}
p,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
h2 {
font: normal 1.3em Tahoma,sans-serif;
margin-bottom: 1px;
color: #005B9C;
margin: 0;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
.container {
position: absolute;
left:50px;
top:188px;
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 8px 8px;
width: 780px;
}
.top {
padding: 8px 8px 0;
}
.header {
position: absolute;
left:50px;
top:10px;
background-color: #fff;
font-size: 1.2em;
height: 173px;
margin: 0 auto;
padding: 8px 8px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #000033;
color: #fff;
color: #FFF;
height: 163px;
}
.header .left {
background: transparent url(/img/Top.jpg) top left repeat-x;
border: 1px solid #7795BD;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 163px;
width: 777px;
text-align: left;
}
.header .right div {
padding-left: 16px;
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
.navigation {
background: #D9E1E5 url(/img/nav.jpg);
border: 1px solid #7795BD;
height: 23px;
}
.navigation a {
background: transparent url(/img/nav.jpg) left top repeat-x;
border-right: 1px solid #7795BD;
color: #fff;
display: block;
float: left;
font-size: 12px;
font-family: Arial;
font-weight: bold;
line-height: 23px;
text-decoration: none;
padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom;
color: #f1f1f1;
}
.main {
border-top: 8px solid #FFF;
background: url(/img/bgmain.jpg) repeat-y;
}
.sidenav {
float: left;
margin: 5px;
width: 195px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
font-weight: bold;
line-height: 30px;
margin: 5;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}
/* content */
.content {
float: right;
margin: 5px;
padding: 0 16px;
width: 536px;
}
.content {
color: #666;
font-size: 1.0em;
margin-bottom: 6px;
}
.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}
.footer {
background: url(/img/bluefooter.jpg) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
I'm brand new to CSS. I pieced together the following CSS style sheet: body { margin-top:5px; margin-bottom:5px; padding:0; background:#ccffff; } t{line-height:36px;} #wrap { position:50%; width:613px; margin:0 auto; background:#ffffff; margin-left:auto; margin-right:auto; align:center; } #sidebar { position:absolute; float:left; width:150px; border: 1px solid #000033; padding:15px; background:#ffffff; height:370px; z-index:1; } #main { float:right; width:390px; border: 1px solid #000033; overflow: auto; font-family: "Times New Roman", serif; font-size: 13px; padding-top:12px; padding-right:20px; padding-bottom:20px; padding-left:20px; background:#ffffff; background-repeat:no-repeat; background-position:75% 535px; background-image:url(smalljester.jpg); height:750px; z-index:2; } It works fine on most browsers, but not of course in IE/Win. I think there's something basic I'm not understanding about style sheets. The page is meant to be (and is on most browsers I've tried and on Macs) centered (the two boxes centered), the two boxes are meant to have white backgrounds with thin solid borders, and the boxes are meant to overlap perfectly (the right border of the left box should exactly overlap the left border of the right box). Right now in IE(8)/Win(XP) it's not centered, the two boxes are not connected (separated by white space on a light blue background), and the white background extends the full height of the #main box (where it's not meant to go below the bottom of the left column). Any help appreciated. Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox. Site: www.measureoffaith.net Stylesheet: www.measureoffaith.net/style.css Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet. Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well. Thanks so much. index.html w/ stripped content: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Measure of Faith on Aerie Peak
</title>
<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
</div>
<div id="container">
<div id="navigation">
<!-- Start of Navigation Bar (NavigationBar2) -->
<table id="NavigationBar2" border="0" cellspacing="0"
cellpadding="0" nof=
"NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
width="140">
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton1) -->
<a href="#" onmouseover=
"F_roll('NavigationButton1',1)" onmouseout=
"F_roll('NavigationButton1',0)"><img id=
"NavigationButton1" name="NavigationButton1"
height="30" width="140" src=
"images/Home_Hbutton_on2.gif" onload=
"F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
border="0" alt="Home" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton2) -->
<a href=
"/eqdkp/viewnews.php"
onmouseover="F_roll('NavigationButton2',1)"
onmouseout="F_roll('NavigationButton2',0)"><img id=
"NavigationButton2" name="NavigationButton2"
height="30" width="140" src=
"images/Raid_News_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
border="0" alt="Raid News" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton3) -->
<a href="charter.html" onmouseover=
"F_roll('NavigationButton3',1)" onmouseout=
"F_roll('NavigationButton3',0)"><img id=
"NavigationButton3" name="NavigationButton3"
height="30" width="140" src=
"images/Charter_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
border="0" alt="Charter" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton4) -->
<a href=
"roster.html"
onmouseover="F_roll('NavigationButton4',1)"
onmouseout="F_roll('NavigationButton4',0)"><img id=
"NavigationButton4" name="NavigationButton4"
height="30" width="140" src=
"images/Roster_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
border="0" alt="Roster" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton5) -->
<a href=
"/eqdkp/listmembers.php"
onmouseover="F_roll('NavigationButton5',1)"
onmouseout="F_roll('NavigationButton5',0)"><img id=
"NavigationButton5" name="NavigationButton5"
height="30" width="140" src=
"images/DKP_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
border="0" alt="DKP" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton6) -->
<a href="/phpBB2/index.php"
onmouseover="F_roll('NavigationButton6',1)"
onmouseout="F_roll('NavigationButton6',0)"><img id=
"NavigationButton6" name="NavigationButton6"
height="30" width="140" src=
"images/Forums_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
border="0" alt="Forums" /></a>
</td>
</tr>
</table>
</div>
<div id="content">
<div class="newspost"><div class="wraptitle">
<p class="subtitle">- I... AM... UNLEASHED!</p>
<p class="thetitle">MAGTHERIDON DOWN</p></div>
<div class="newsdate">
28.04.2007 by <img src="images/icons/mar.png" />
</div>
<div class="newscontent">
Magtheridon proved to be no match to the professional
button clicking skills of MoF. Wiping a few times in
order to fine tune the button clicking, we emerged
with victorious with zero deaths and some bad loot.
</div>
<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
</div>
...clipped content...
</div><div style="clear: both;">
</div>
<div id="footer">
</div>
</body>
</html>
style.css: Code: html,body { height: 100%; }
body{
background: #000000 url('background-image.jpg') repeat-y;
margin: 0;
height: 100%;
}
.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}
.wraptitle{
float: left;
height: 79px;
}
p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}
p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}
.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}
.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}
p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
text-decoration: none;
}
a:active{
text-decoration: none;
}
#banner{
background-image: url('header-one.jpg');
height: 200px;
width: 943px;
padding: 0;
}
h5.styling{
color: #555555;
font-family: trebuchet ms, tahoma;
border: 0;
padding: 8px;
margin: 0;
}
p.styling{
color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 8px;
margin: 0;
text-align:justify;
}
td.styling{
font-color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 0;
margin: 0;
text-align:justify;
}
html > body #navigation{
background-image: url('left-runner.jpg');
font-size: 0;
float: left;
width: 140px;
min-height: 100%;
padding: 0 0 0 4px;
line-height: 0;
border: 0;
margin: 0;
}
html > body #content{
background: #EDF2F5;
float: right;
width: 796px;
min-height: 100%;
padding: 0;
border: 0;
margin: 0;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1px;
}
#container{
width: 940px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
#footer{
background-image: url('bottom-frame.jpg');
width: 943px;
height: 47px;
}
I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable. This is my html: Code: <div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div> <div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0" /></div> This is my css: Code: body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr {position:static; width:auto; min-width:0px; min-height:100%;
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}
any help would be greatly appreciated. Thanks! Hi There, Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here? This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP. HTML: Code: <body> <div id="mainSiteHold"> <div id="contentLeft"><p> </p></div> <div id="contentMid"><p> </p></div> <div id="contentRight"><p> </p></div> </div> </body> CSS: Code:
body { margin:0px; padding:0px; background-color:#ffffff; }
#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }
#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }
#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }
#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }
Thanks I've been working will many css hacks. I just can't seem to get anything to work with the "first child" posting the full css doc. Hopefully someone can help me. PHP Code: .gridContainer { padding:20px; /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorstr='#003300', endColorstr='#006600'); /* background-color: #006600;*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#003300), to(#007700)); background-image: -webkit-linear-gradient(top, #003300, #007700); background-image: -moz-linear-gradient(top, #003300, #007700); background-image: -ms-linear-gradient(top, #003300 0%, #007700 100%); background-image: -o-linear-gradient(top, #003300, #007700); background-image: linear-gradient(top, #003300, #007700); /* Grid Shadow */ -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; } /* Font Family, Size and Color */ .gridContainer, .grid, .gridHeaderRow, .gridContainer a, .gridContainer input { font-family:arial; font-size:10px; font-weight:bold; color:#fff; } .grid { border-spacing:0px; border-collapse:collapse; /* if you want cell separation border-spacing:1px; border-collapse:separate; */ background:#005501; } /*********************************************************************************/ /*********************************************************************************/ /***************************** END COLORS *****************************/ /*********************************************************************************/ /*********************************************************************************/ /* if you want to turn off animations for speed reasons turns these off */ .gridContainer tr, .gridContainer td, .gridContainer th, .gridContext div { /* -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; */ } /* padding of the cells */ .grid td, .gridHeaderRow th { padding:0px; border-left:1px solid #636470; padding-left:6px; } .grid td { border-left-color:transparent; } .grid td:first-child, .gridHeaderRow th:first-child { padding-left:12px; } .grid td { padding-top:5px; padding-bottom:5px; } /* ODD ROWS */ .grid tr:nth-child(2n) { } /* EVEN ROWS */ .grid tr:nth-child(2n+1) { } /* this can't inherit the color because its fixed to the bottom of the page */ .gridPager.fixed { background:#222; } /* Row Highlight */ .gridWrapper tr:hover, .gridContainer th:hover, .gridWrapper tr:hover input, .gridWrapper tr:hover a{ color:#ffe; background-color: #005500; } /* Current Cell Highlight */ .grid td:hover { background-color: #008800; } /* Cell Borders */ .grid td { } .gridHeaderRow { border-collapse:collapse; } /* column hilte */ .grid td.hilite { background-color:#2A8ADD; color:#000; } /* stuck row */ .stuckRow td{ padding:8px; background:#003300; color:#fff; } /* right click menu main box */ .gridContext { background-color:white; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:3px 3px 15px #000; -webkit-box-shadow:3px 3px 15px #000; box-shadow:3px 3px 15px #000; } /* right click menu each item */ .gridContext div { color:black; font-size:12px; padding:6px 15px; } /* right click menu hover */ .gridContext div:hover { background-color:#4071ee; color:white; } /* editable cell */ .editableInput[type="text"] { border-width:0px; /*border-bottom:1px dashed #ccc;*/ } textarea.editableInput { } /* title bar */ .gridTitle { padding:10px; font-size:14px; } /* structure for entire grid */ .gridContainer { margin-bottom:10px; overflow:hidden; position:relative; border-collapse:collapse; } /* minimum shown before scroll bar apppears */ .gridWrapper { max-height:500px; overflow-x:hidden; } .gridHeaderRow tr:first-child { position: relative; background-image: -ms-linear-gradient(top, #006600, #002200); background: none; background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); background-image: -webkit-linear-gradient(top, #006600, #002200); background-image: -moz-linear-gradient(top, #006600, #002200); background-image: -o-linear-gradient(top, #006600, #002200); background-image: linear-gradient(top, #006600, #002200); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=0, startColorstr='#006600', endColorstr='#002200'); -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorStr=#006600,EndColorStr=#002200)"; } /* the header row cells */ .gridHeaderRow th { width:150px; cursor:pointer; padding-top:12px; padding-bottom:12px; } .gridHeaderRow th:first-child { border-left:0px; } .gridHeaderRow th:last-child { border-right:0px; } /* expand the inner components to meet the size of the container */ .grid, .gridHeaderRow { width: 100%; } /* all input fields */ .gridContainer input, textarea { background-color:rgba(255,255,215,.8); background-color: #CCDCAC; border:1px solid rgba(255,255,255,.2); outline:0px; height:2em; margin-top:-2px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow: inset 0px 2px 5px #111111; -moz-box-shadow: inset 0px 2px 5px #111111; border:0px; color: #000; } /* no border left on first cell */ .grid td:first-child { border-left:0px; } /* no border right on last cell */ .grid td:last-child { border-right:0px; } /* select drop down boxes */ .grid td select { width:95%; border: 1px solid rgba(255,255,255,.1); outline:0px; } /* the pager */ .gridPager { width:auto; height:25px; overflow:hidden; padding:10px 0px 10px 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; background-color: rgba(0,0,0,.2); background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,.2))); background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.1)); background-image: -moz-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: -ms-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: -o-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: linear-gradient(top, transparent, rgba(0,0,0,.2)); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003300', endColorstr='#006600'); } /* when the pager is fixed */ .gridPager.fixed { position:fixed; bottom:0; z-index:999; width:100%; } /* the last button in the pager when its fixed */ .gridPager.fixed > div:last-child { position: relative; left:-20px; } /* every div inside the pager */ .gridPager > div { margin-right:16px; float:left; } /* the text string inside the pager */ .gridTotal { padding:5px; } /* button styles */ .gridButton { padding:5px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; text-align:center; font-size:11px; background-color: #006600; background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); background-image: -webkit-linear-gradient(top, #006600, #002200); background-image: -moz-linear-gradient(top, #006600, #002200); background-image: -ms-linear-gradient(top, #006600 0%, #002200 100%); background-image: -o-linear-gradient(top, #006600, #002200); background-image: linear-gradient(top, #006600, #002200); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002200', endColorstr='#006600'); -webkit-box-shadow:1px 1px 5px #222; box-shadow:1px 1px 5px #222; } .gridButton:active { -webkit-box-shadow:-1px -1px 4px black; -moz-box-shadow:-1px -1px 4px black; } /* buttons in the title bar */ .gridTitle .gridButton { margin-top:-3px; margin-right:6px; float:right; } /* save button in the pager */ .gridPager .gridSave { float:right !important; display:none; } /* refresh button is tinier */ .gridRefresh { font-size:10px; } /* the div inside of each th that will chagne size */ .colResizer { background-color:transparent; position:relative; height:inherit; } /* the handle on each th that will grab to resize */ .colHandle { height:100%; width:20px; background-color:transparent; position:absolute; right:0px; top:0px; } /* the bottom right corner div that allows you to resize */ .gridHandle { width:10px; height:10px; cursor:se-resize; position:absolute; bottom:0px; right:0px; background-color:rgba(0,0,0,.5); } /* the right click menu */ .gridContext { position:fixed; width:200px; padding:2px; z-index:99999; } /* each option in the right click menu */ .gridContext div { cursor:pointer; } /* the close button in the right click menu */ .closeContext { margin:0px !important; padding:0px !important; position:absolute; top:3px; right:3px; z-index:98; font-size:11px !important; } /* each input box inside the table inherits its parent styles */ .editableInput { width:95%; background:transparent; color:inherit; font-weight:inherit; font-size:inherit; font-family:inherit; margin:0px; } /* clickable nRows */ .nRows { cursor:pointer; } .grid a { text-decoration:underline; } I used the CSS Tricks dot com guide to make my menu bar items equidistant from one another and it works perfectly in Chrome, Firefox and IE8.... but not IE7 (or IE8 Compatibility Mode). BTW the guide example works fine in IE7 but I'm doing something only ever so slightly different. I really don't have a clue what to do, so would appreciate some help. Here's the relevant CSS code I'm using: Quote: #content { width:1000px; margin-left:auto; margin-right:auto; margin-top:0; margin-bottom:0; padding:0; padding-top:230px; } /* Menu */ #menu { height:40px; padding:0; padding-left:40px; padding-right:40px; display:block; } #menu a { margin:0; padding:0; display:block; float:left; } #menu a span { position:relative; display:block; z-index:-1; } #menu-row { margin: -40px 0 0 150px; padding: 0; height: 40px; } #menu-row div { width: 33.3%; float: left; } #menu-row div a { float: right; } #menu .home { background: url(images/menu-home.png) 0 0 no-repeat; display: block; width: 150px; height: 40px; outline: none; } #menu .science { background: url(images/menu-science.png) 0 0 no-repeat; display: block; width: 150px; height: 40px; outline: none; } #menu .radio { background: url(images/menu-radio.png) 0 0 no-repeat; display: block; width: 150px; height: 40px; outline: none; } #menu .club { background: url(images/menu-club.png) 0 0 no-repeat; display: block; width: 150px; height: 40px; outline: none; } and HTML Quote: <div id="content"> <div id="menu"> <a href="#" class="home"><span>Home</span></a> <div id="menu-row"> <div><a href="#" class="science"><span>Science</span></a></div> <div><a href="#" class="radio"><span>Radio</span></a></div> <div><a href="#" class="club"><span>Club</span></a></div> </div> <!--/movers-row --> </div> <!--/menu --> All the links in the menu-row div are shifted up vertically from the first link in IE7 and I don't know why? I'm a novice web developer and I created a website for a non-profit group using a free CSS Template. It worked great until a few months ago, then the left and right borders suddenly were out of align. It works fine on another web hosting company's web server, but not the one it needs to work on. I recreated the whole website using a different CSS template and it is doing the same thing! Any ideas? Thanks so much! Hi all, Has anyone heard or seen this before. I am trying to run a test on my local server (Apache) and it will not display correctly...the colums seem to be all over the place. The wierd thing is that when i upload it to a remote server like he http://www.cartgurudemo.com/3c-hd-ft-flex.htm it shows fine. Also when i test it with IE both local and remote it works fine. Any ideas as to what this might be? Cheers, camcim When using the following code, the "Design" preview does not display correctly within Dreamweaver MX 2004, but it does display correctly in all browsers. Does anyone know if this a problem with Dreamweaver or my CSS code. Update:- removing "position:absolute" from #infoPanel fixes the design preview problem, but this isn't really a solution, as I need to position absolutely. The only problem I've got is the design preview in Dreamweaver. I am happy with the final browser output, but the layout is awful within Dreamweaver. Thanks Matthew Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">
<!--
#infoPanel{
position:absolute;
width:760px;
height:100px;
border-style:solid;
border-width:1px;
}
#infoPanelDetails{
margin: 10px;
position:absolute;
width:480px;
}
#infoPanelLink{
margin:10px;
position:absolute;
width:240px;
left:480px;
text-align:right;
}
-->
</style>
</head>
<body>
<div id="infoPanel">
<div id="infoPanelDetails">
<p>Some detailed text here.</p>
</div>
<div id="infoPanelLink">
<p><a href="http://www.wherever.com" >www.wherever.com</a></p>
</div>
</div>
</body>
</html>
Hi, I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Is there a problem in my code? Thanks, Ehud. I'm trying to get my page to format correctly in IE. It looks fine in firefox, but in IE when the page is first loaded the footer isn't at the very bottom of the window. If I refresh the screen it drops down to the bottom and it looks fine. Here is my HTML and CSS. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./nmi.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Client Server NMI</title>
</head>
<body>
<!-- TitleBar -->
<div id="titleBar">
<div id="titleImg">
<img src="./title_csnmi.jpg" alt="title image">
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
</div>
<!-- Clear out the float settings -->
<div class="clearDiv"></div>
<!-- Main Page -->
<div id="container">
<div id="iframe">
<iframe src="foo.html" name="main" frameborder=0 width=100% height=100%></iframe>
</div>
<div id="navBar">
<h4>Interface Menu</h4>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
</div>
</div>
<div class="clearDiv"></div>
<div id="footer">
Client Server NMI - MEDITECH
</div>
</body>
</html>
Code:
html{
margin:0;
padding:0;
}
body{
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
color: black;
}
/*Title Navigation bar */
#titleBar{
position: absolute;
top:3px;
width: 100%;
padding:5px 0 5px 0;
border-bottom:2px solid gray;
border-top:2px solid gray;
}
#titleImg{
position:relative;
margin:10px 40px 0 5px;
float:left;
}
img{
text-decoration:none;
border:0;
}
.titleLinks{
position:relative;
float:left;
margin-left:2px;
padding:5px 15px 0 15px;
border:1px solid gray;
width:auto;
height:auto;
}
.clearDiv{
clear:both;
}
/*Main Div*/
#container{
position:absolute;
margin:0;
padding:0;
top:100px;
width:100%;
height:74%;
}
#iframe{
position:relative;
margin:0;
padding:0;
width:85%;
height:100%;
float:left;
}
/*Side Navigation bars*/
#navBar{
position:relative;
float:left;
margin-left:10px;
width:13%;
font-size:10px;
border-left:1px solid #333366;
border-right:1px solid #333366;
border-bottom:4px solid #333366;
}
#navBar h4{
margin:0;
padding:2px 3px 2px 0;
background-color:#333366;
font-size:1em;
color:#EEEEEE;
text-align:right;
}
#navBar a{
display:block;
text-decoration:none;
color:black;
background-color:#EEEEEE;
padding:4px 2px 4px 8px;
}
#navBar a:hover{
background-color:#333366;
font-weight:bold;
color:white;
}
/* Footer */
#footer{
position: absolute;
width: 100%;
bottom:0;
left:0;
font-size:.75em;
text-align:right;
background-color:#333366;
color:white;
}
1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text 2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list. 3. Right now my soltuion to not display the divider image below the last element in the list is through the code: <li><a style="background-image: none;" href="x.html">SOmething</a></li> </ul> However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck The CSS: Code: .leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML: Code: <div class="leftCol"> <div class="submenuetop"></br><h1>something</h1></div> <div class="submenue"> <ul> <h3>Listing</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3.html">5</a></li> </br> <h3>Produkt</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3">something</a></li> </ul> </div> <div class="submenuebottom"></br></br></br></br></div> </div> Hello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. My friend has been working with a charity, and apparently their website is outdated. I have decided to attempt giving them a new look but already find myself having some CSS issues. In FireFox things are looking good so far, but not in IE. I would like someone to first help me with the list items <li> I want them to appear in IE the same as they do in FF. Can you help me with this? Ugh, I'm trying to add an URL but new users can't what a waste of time this has been! If you can work this out, here is the URL: http:// thomasjadams.co.uk / charity |
|||||||