|
CSS - Ff, Chrome Display Perfect, Ie Does Not.
My website open fine in pretty much everything except IE (Ie is terrible). I tried to use the "if ie" stylesheet link but its not working. Help please. Test server is http://ivorygaming.clanservers.com/debuhrs
HTML Code: <html> <head> <title>deBuhrs Seed & Feed</title> <!--[if IE 7]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> </head> <body bgcolor="#070707"> <div id="navbar"><ul id="navbar"> <li><a href="index.html"><span id="green">H</span><span id="white">ome</span></a></li> <li><a href="about.html"><span id="green">A</span><span id="white">bout</span></a></li> <li><a href="staff.html"><span id="green">S</span><span id="white">taff</span></a></li> <li><a href="products.html"><span id="green">P</span><span id="white">roducts</span></a></li> <li><a href="contact.html"><span id="green">C</span><span id="white">ontact</span></a></li> </ul> <div id="logo"></div> <div id="front"></div> <div id="side"></div> <h2>New Website</h2> <hr color="#b9bab9" width="60%" align="left" height="50%"> <p class="postinfo">posted by Bernie deBuhr at 10.39 p.m. Sunday, July 4th, 2009</p> <p class="content">    deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.</p> <div id="bottom"></div> <div id="container"></div> </body> </html> ie.css Code: @charset "utf-8"; /* CSS Document */ body { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; text-align: center; } #container { width: 1024px; height: 15px; margin: 0 auto 0 auto; text-align: left; } #logo { height: 112px; width: 702px; padding-bottom: 0px; padding-top: 0px; margin-top: 1000px; margin-left: -200px; background: #FFF url('images/logo.png') ; } #front { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/front.png') ; } #side { height: 444px; width: 312px; padding-bottom: 0px; padding-top: 0px; margin-top: -269px; margin-left: 700px; background: #FFF url('images/side.png') ; } #block { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -177px; margin-left: 10px; background: #FFF url('images/block.png') ; } #block1 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 124px; background: #FFF url('images/block.png') ; } #block2 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 238px; background: #FFF url('images/block.png') ; } #block3 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 352px; background: #FFF url('images/block.png') ; } #block4 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 466px; background: #FFF url('images/block.png') ; } #navbar ul li { padding-left: -10px; position: relative; display: inline; padding-top: 383px; color: #FFFfff; float: left; font-size: 10pt; font-family: arial; font-style: italic; margin-left: 15px; } #green { color: #9bf006; font-size: 11pt; font-family: arial; font-style: italic; } #white { color: #c8cbc3; font-size: 9pt; font-family: arial; font-style: italic; } a { text-decoration:none; color:#930; border-bottom: 1px solid #5b8c04 } h1,h2,h3,h4,h5 { margin:0; text-align:left; color:#9bf006; font: arial; margin-top: -100px; margin-left: 15px; } p.postinfo { margin:0; text-align:left; color:#a0a19e; font: arial; margin-top: 0px; margin-left: 35px; font-size: 8pt; } p.content { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 15px; margin-left: 40px; font-size: 10pt; width: 600px; height: 200px; } p.phone { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: -180px; margin-left: 40px; font-size: 10pt; } p.email { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 3px; margin-left: 40px; font-size: 10pt; } #bottom { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/bottom.png') ; }
Similar TutorialsFor some reason, FF is displaying the web pages bigger than chrome or IE. I'm reviewing the site CSS with firebug on both FF and chrome but can't seem to find why its pages are different sizes on different browsers. It seems the seems either FF is scaling it up or IE and Chrome are scaling it done. The other question is, which browser(s) are displaying the real size of the webpage? Any help would be greatly appreciated! http://50.116.66.243/~ab27853/ Thanks. Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE. Here is my site: Well I guess I can not link my site, but hopefully someone can still help me. Here is my code: Quote: /* Tabs ==================== */ #homepagetabs { border-bottom: none; margin-bottom: 10px; padding-left:170px; height:51px; background:transparent url } #homepagetabs li { display: inline; list-style-type: none; margin-top: 14px; border: none; border-bottom: none; float: center; line-height: 14px; margin-right: 8px; text-decoration: none; cursor: pointer; color:#fff; background: none; font-weight:bold; font-size:12px; } #homepagetabs li.currenttab { margin-top: 14px; background: none; border: none; border-bottom: none; font-weight:bold; color:#fff; font-size:12px; text-decoration:underline; } #options_69 th { font-size: 100%; } Hi, well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome. here is the test page http :// letseedrop.blogspot.com/2011/01/testing-8. html i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped. well i am pasting css here too if you don't want to go into the source code Code: .demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}
.gamedetailpara {
text-decoration:underline;
color:#000000;
}
ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('(URL )) no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}
ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}
ul.gamecolumns li .gamedetails:hover {
display:none;
}
ul.gamecolumns li:hover .gamedetails {display: block;}
ul.gamecolumns li:hover .gamedetails:hover {display: none;}
thank you in advance. Hi All, I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone). The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK). The CSS for the element is: CSS Code: Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}
.keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}
The html for the element is: html Code: Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> The image stretches - it works fine on firefox and IE8. The web address is www.wellandpower.net There are 3 of these html elements on the left hand side of the page. TIA Regards Charlie I'm having a bit of trouble trying to figure out the problem he http://www.lovemeforme.org/alecia as you can see, in IE the main content is over about 3px, but in firefox it's perfect.. i'm a perfectionist and it's really bothering me. Thanks in advance! I think all I need is a new set of eyes. I have an XHTML-Strict-All-Div-Perfect layout for a new site I am working on. I have all of the heights and widths and alignments perfect. Everything was supurb until I added content that extends greater than 100% of the viewport. Typical story, I know. The thing is, I have made hundreds of web sites and came across and fixed that problem. I've used min-height, I've made sure to include all containers like html and body.. I am pretty sure I've done it all. So what's up? Please take a look at the site and tell me what you think. Realms Of Role Playing Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! Hi, I'm looking for code that will display a ul with nested uls as a dropdown. Furthermore, the links and dropdowns should center in the width of the nav. as I add more top level links, the set should expand both left and right. Right now, I can either make the nav align left, or justify the top level ul so the links fill the nav. I can't seem to make the leap to centered links though. You can see what I'm talking about he lipsitzponterio9[dot]com Notice how the home link is left aligned, but contact us has a little space to the right. Can anyone help? Thanks! Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE. If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place... help? Hi all, I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html and my css file is here http://www.studioflow.net/sfglobal.css Do I need to just abandon my quest for pixel perfect alignment? Thanks, alan Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing. http://mp3realm.org/new/index.php (First one) http://mp3realm.org/new/search.php (search page) http://mp3realm.org/new/default.css (CSS) Thanks. Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
<body> <div id="wrapper" style=" vertical-align:middle;"> <div id="border-top"> <div id="border-left"> <div id="border-right"> <div id="border-bottom"> </div> </div> </div> </div> </div> </body> body { background-color:#5E362C; margin: 0 0 0 0; } #wrapper { width: 828px; height: 558px; position:relative; left: 50%; margin-left:-414px; } #border-top { background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; } #border-left { background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:20px; } #border-right { background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg); background-position:top right; background-repeat:repeat-y; width: 828px; height: 557px; margin-top:-20px; margin-bottom:20px; } #border-bottom { background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg); background-position:bottom right; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:-1px; } Thanks for the help ! Hi, I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time. I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers. The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns. The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded? Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling. http://www.acecards.com Code: body {
background-color: #999999;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}
#container {
width: 750px; /* For browsers with no escapes */
\width: 770px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #000000;
}
#banner {
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
height: 251px;
background-repeat: no-repeat;
clear: both;
}
#mainarea {
clear: both;
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
background: url(images/fauxcolumns.gif) repeat-y;
display: table;
}
#sidebar {
width: 179px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 179px; /* For good browsers */
background-color: #993300;
float: left;
}
#content {
margin-top: 0px;
float: right;
background-color: #FFFFFF;
width: 570px; /*For browsers with no escapes */
\width: 570px; /*For IE5/Win*/
w\idth: 570px; /*For good browsers */
}
#footer {
width: 740px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 740px; /* For good browsers */
padding: 5px;
clear: both;
}
.FooterText {
font-family: Verdana;
color: #FFFFFF;
font-size: 10px;
text-align: right;
}
.Bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
line-height: 17px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodylink {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #499EEE;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodyhighlight {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #993300;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.SideBarBanner {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
line-height:inherit;
padding-top: 5px;
padding-bottom: 5px;
}
.SideBarLink {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarHeading {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thick solid;
border-top-color:#000000;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarMenuBlock {
background-image: url(images/button.gif);
background-repeat: no-repeat;
height: 26px;
margin-top: 4px;
margin-bottom: 0px;
padding-left: 20px;
margin-left: 9px;
margin-right: 9px;
width: 159px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 159px; /* For good browsers */
text-align: left;
vertical-align: middle;
color: #000000;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
.Heading {
width: 520px; /* For browsers with no escapes */
\width: 570px; /* For IE5/Win */
w\idth: 520px; /* For good browsers */
padding-left: 40px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
background-image: url(images/aceofspades.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: left;
vertical-align: top;
font-weight: bold;
font-style: italic;
}
img {
border: none;
}
Website: http://2htts.com/CATBlog CSS: http://2htts.com/CATBlog/skins/default/CATBlog0.1.css Problem: Firefox displays this site, basically perfect, except for a space at the top of the page, above the header. IE and NN each have a fair number of problems. I've grabbed much of my CSS from various places. I have to admit, my eyes are sore and tired, and I'm a bit frustrated, trying to find what the problems are. Not that I'm any expert at cross-browser hacks for CSS, anyway... Any help is greatly appreciated. Thanks for taking the time to read my question. I'm having to update a site I did a while ago, and am now quite out of practice, as I've done nothing since. I made the site before Chrome was released, and now, since I'm updating it, would like to make sure it displays properly in Chrome as well. I have buttons for my top nav, that when you hover over them increase in size. The text on the button is not a part of the image. The text in question is "Contact Us" in FF and IE the text wraps after Contact, with the Us underneath it. In Chrome it stays on one line. If I decrease the size of my <div> by one pixel the text wraps in Chrome. I can't do that though as it shaves off one pixel of my button image. I can't seem to find a site that will tell me what the difference is between Chrome IE and FF. Here is my css and html for my nav if it helps. attached is a pic of the difference. The red is to sho the navcontainer div. Notice the difference in the Contact Us button. Thanks, Brad HTML: Code: <div id="navcontainer">
<ul>
<li class="Active OneLineAct">Home</li>
<li class="NotActive1 OneLine"><a href="ZoneAll-Products.htm">Products</a></li>
<li class="NotActive1 TwoLine"><a href="ZoneAll-ContactUs.htm">Contact Us</a></li>
<li class="NotActive2"><a href="wadsz3000.htm">Wiring Diagrams</a></li>
<li class="NotActive1 TwoLine"><a href="stahr.htm">What’s New</a></li>
<li class="NotActive2"><a href="application.htm">Sample Specs</a></li>
<li class="NotActive2"><a href="tshooting.htm">Trouble Shooting</a></li>
</ul>
</div>
CSS: Code: #navcontainer ul
{
margin: 10px 8px 0px 0px;
padding: 0px;
/*background-color: transparent;*/
background-color:red;
color: #000000;
width: 728px;
font-family:Arial, Helvetica, sans-serif;
float: right;
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li.Active {
text-decoration: none;
text-align: center;
float: left;
width: 104px;
height: 70px;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
/*letter-spacing: .1em;*/
/*padding: 20px 0px 0px 0px;*/
margin: 0px 0px 0px 0px;
font-size: 22px;
}
#navcontainer ul li.OneLineAct{
padding: 20px 0px 0px 0px;
}
#navcontainer ul li.TwoLineAct{
padding: 10px 0px 0px 0px;
letter-spacing: .11em;
}
#navcontainer ul li.NotActive1 a {
text-decoration: none;
color: #000000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
margin: 10px 12px 0px 13px;
font-size: 14px;
}
#navcontainer ul li.NotActive2 a {
text-decoration: none;
/*color: #000000;*/
color:#990000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
letter-spacing: .1em;
margin: 10px 12px 0px 13px;
padding: 12px 0px 0px 0px;
font-size: 14px;
}
#navcontainer ul li.NotActive1 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 30px 0px;
font-size: 20px;
float: left;
}
#navcontainer ul li.NotActive2 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 13px 0px;
padding: 8px 0px 0px 0px;
font-size: 20px;
float: left;
}
#navcontainer ul li.OneLine a{
padding: 18px 0px 0px 0px;
}
#navcontainer ul li.TwoLine a{
padding: 12px 0px 0px 0px;
letter-spacing: .11em;
}
#navcontainer ul li.OneLine a:hover {
padding: 20px 0px 0px 0px;
}
#navcontainer ul li.TwoLine a:hover {
padding: 10px 0px 0px 0px;
}
I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? |
|||||||