|
CSS - Odd Css Issue In Chrome
We've set up a CSS / Javascript dropdown menu which works fine in all browsers (even Opera, amazingly) EXCEPT Chrome- does anyone have an idea why? Is Chrome particularly bad with this sort of code?
The CSS for the menu is as follows: .jqueryslidemenu{ font: bold 12px "Arial Unicode MS", Arial, sans-serif; background: #6666cc; width: 97%; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #6666cc; /*background of tabs (default state)*/ color: white; padding: 9px 25px; border-right: 1px solid #fff; color: #2d2b2b; text-decoration: none; border-left:0px; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: #33cc66; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 12px "Arial Unicode MS", Arial, sans-serif; width: 120px; /*width of sub menus*/ float:left; padding: 10px 20px 10px; margin: 0; border-top-width: 0; border-right: 0px solid #fff; border-left: 0px solid #fff; border-bottom: 1px solid white; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; } And it uses the following Javascript file: var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']} var jqueryslidemenu={ animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds buildmenu:function(menuid, arrowsvar){ jQuery(document).ready(function($){ var $mainmenu=$("#"+menuid+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0}) $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append( ) $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") this._offsets={left:$(this).offset().left, top:$(this).offset().top} var menuleft=this.istopheader? 0 : this._dimensions.w menuleft=(this._offsets.left+menuleft+this._dimens ions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft if ($targetul.queue().length<=1) //if 1 or less queued animations $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqu eryslidemenu.animateduration.over) }, function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.slideUp(jqueryslidemenu.animateduration. out) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) }) //end document.ready } } //build menu with ID="myslidemenu" on page: jqueryslidemenu.buildmenu("myslidemenu", arrowimages) And lastly, the menu is placed in pages as follows (example): <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li class="mainmenu"><a href="index.htm">Home</a></li> <li class="mainmenu"><a href="news.htm">News & Events</a></li> <li class="mainmenu"><a href="products.htm">Products & Services</a> <ul> <li class="menu"><a href="#nogo">New Products</a> <ul> <li class="menu"><a href="clinaxysdetails.htm">Details</a></li> <li class="menu"><a href="clinaxystrials.htm">Trials</a></li> <li class="menu"><a href="clinaxyssafety.htm">Safety</a></li> <li class="menu"><a href="instruments.htm">Instruments</a></li> </ul> </li> <li class="menu"><a href="installation.htm">Installation</a></li> <li class="menu"><a href="training.htm">Training</a></li> <li class="menu"><a href="maintenance.htm">Maintenance</a></li> <li class="menu"><a href="usergroup.htm">User Group</a></li> </ul> </li> <li class="mainmenu"><a href="#nogo">Quality</a> <ul> <li class="menu"><a href="qualitypolicy.htm">Policy</a></li> <li class="menu"><a href="qualitycert.htm">Certificate</a></li> </ul> </li> <li class="mainmenu"><a href="customers.php">Customer Area</a></li> <li class="mainmenu"><a href="contacts.htm">Contacts</a></li> <li class="mainmenu"><a href="login.php">Log In</a></li> </ul> <br style="clear: left" /> </div> Works fine in everything we've tried, apart from Chrome...???? Similar TutorialsHi all, ive got a problem that only seems to be happening in google chrome, if you look at http://roksportsurf.co.uk/acatalog/Mens_Billabong_Tee_Shirts.html the red circles with the price in are out of position on first load, but if I refresh the page they are in the correct position. Ive tried IE and Firefox and they display fine there, even safari works ok. any ideas what could be causing it? Hi, Thanks for your time... If you visit this site with IE7, http://demo.wp4re.com, you should see a big gap just beneath the main menu and the house photo and blue back gradient background. This looks fine in FF3 and Chrome, so you can see how it's meant to look with either browser. Any idea what's causing this? PS - The xhtml doesn't validate (2 errors), but it's it's not the issue as I already tried removing the culprits yet it didn't affect the gap. I've since put the code back in. Thanks 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 New accounts are not allowed to create posts containing URLs because the developers of this site are incapable of anti-spam measures that do not hinder legitimate users. So goodbye. I won't let the door hit my *** on the way out. Hi All, I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b". I can't post links so the website is www (dot) authenticimpressions (dot) com I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out. What other information should I post or provide to get some help? Thanks in advance, I really appreciate it. 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 Guys I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website. I am using the latest mac OS and latest versions of all browsers. The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this. Here is the code for the form... <form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" > <ul> <li> <label for="name">Name:</label> <input name="name" id="name" type="text" class="required" /> </li> <li> <label for="email">E-mail:</label> <input name="email" id="email" type="text" class="required email" /> </il> <li> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="required" /> </li> <li> <label for="detail">Message:</label> <textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea> </li> <li> <input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" /> </li></ul> </form> Here is the css for that page... #content_about { color: #666666; } /*************************************************** CONTACT ***************************************************/ #form { margin: 0px; position: relative; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 15px; float: left; } #form div { width: 510px; position: relative; float: left; padding-bottom: 9px; } #form div label { width: 400px; } #form div label.error { color: #a80000; position: absolute; top: 0px; right: 0px; text-align: right; font-size: 11px; } #form div.message_sent { background-color: #31B8DA; width: 890px; float: left; padding: 10px; margin-bottom: 15px; color: #FFFFFF; } #form input { width: 499px; padding: 8px; font-size: 13px; color: #999999; background-color: #FFFFFF; float: right; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; } #form input:focus, #form textarea:focus { background-color: #F4F4F4; } #form textarea { width: 500px; padding: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #aaaaaa; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; float: right; margin: 0px; } #form .submitBtn { background-color: #31b8da; width: 95px; color: #FFFFFF; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 0px; font-size: 16px; height: 35px; display: block; margin-top: 20px; } #form .submitBtn:hover { background-color: #1F93B4; color: #FFFFFF; } #form .submitBtn:focus { background-color: #4FC1E1; } #form strong { font-size: 24px; color: #FFFFFF; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #6a6a6a; display: block; } #form .font-11 { font-size: 11px; color: #CCCCCC; display: inline; } #content_about #form li label { margin-top: 0px; margin-right: 35px; margin-bottom: 0px; margin-left: 0px; line-height: 30px; } #content_about #form li { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 0px; } Any help would be greatly appreciated. Regards Jay 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;
}
Okay this is kind of blowing my mind. Here is my CSS: Code:
body
{
margin: 0px;
text-align: center;
}
table
{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
td
{
padding: 0px;
vertical-align: top;
}
td.banner
{
background-image: url("images/design/BANNER_TOP_LEFT.jpg");
background-repeat: no-repeat;
width: 597px;
height: 70px;
}
td.map
{
background-image: url("images/design/MAP_BACKGROUND.jpg");
background-repeat: no-repeat;
width: 203px;
height: 199px;
}
td.content
{
height: 100%;
background: red;
}
here is my XHTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<table width="800">
<tr>
<td class="banner">
<div id="login">
<p>
Hello
</p>
</div>
</td>
<td rowspan="2" class="map">
<p>Hello</p>
</td>
</tr>
<tr>
<td class="content">
<div id="contest">
<p>Hello</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Here is what it looks like in each brower (attached). I want every browser to look like it does in Chrome.... I don't understand why the others are different? Thanks... (haven't been at developing for a while). I have a layout that seems to work in IE8, but throws Chrome for a loop. Something tells me that it working in IE8 is a bad sign... In IE8 the bottom of the screen and the div have a space between them. In Chrome, they are butted up against each other, and the coloring between the footer (I think) and the bottom of the screen is blue (where it should be cream). Have not tested in FF, I would assume the same issue. Thanks ahead of time for the help, -Gnome101 CSS Code:
html {
margin:0;
padding:0;
}
body {
background-color:87CEFA;
margin-top:35px;
margin-bottom:10px;
}
#container {
background-color:FAF0E6;
left:15px;
width:60%;
height:100%;
position:relative;
border-bottom:1px solid black;
}
#header {
width:100%;
background-color:87CEFA;
padding:0px;
}
#footer {
position:absolute;
bottom:10px;
width:100%;
height:25px;
}
#content{
width:100%;
border:1px solid black;
}
Page - I know there are blank spaces, but I am doing this in Lotus/Domino...so the blanks are filled with html... Code:
<div id="container">
<div id="header">...</div>
<div id="content">...
<div id="managerArea">
...
</div>
</div>
<div id="footer">
...
</div>
</div>
Hi, i have just noticed a very strange cross browser issue. On several of my sites, i have applied simple css styling to my select boxes / drop down menus... some of this styling has been simply changing the color of the text in the drop down menu. The styling is fine in IE7+, FF (PC), Opera (PC), Chrome (PC), FF (Mac), Safari (Mac), Opera (Mac) BUT NOT ON Chrome (Mac) I can't understand how you can't apply simple css such as text color to Chrome on a Mac Has anyone else noticed this or found a solution to this... thanks in advance for your help I am a complete novice and have helped someone with their website. All fine in IE but the sub menus do not work in Chrome? If you hover over Domestic Services (for example) in the main menu which runs down the left of my web site a sub menu appears to the right in IE (I have version 7) but not in Chrome (which I've just downloaded so I have the newest version). It all works just as I want it to do in IE7. Is this a Chrome issue or more than likely I have done something wrong. Can anyone help me, sorry I have tried but I can't see what I've done wrong. Thanks for any help - Lindsay. Here is my CSS /* Menu properties */ #left-menu{ width:210px; height:265px; border-left:#474843 19px solid; background-color:#171717; padding:30px 0px; } #left-menu ul { margin:0; padding:0; list-style:none; } #left-menu ul li { margin:0px; padding:0px; height:20px; line-height:20px; } #left-menu ul li a{ font-family:Tahoma, Verdana, Arial, sans-serif; font-size:12px; font-weight:normal; text-decoration:none; color:#D7D7D7; background:url(images/left-menu.gif) 26px 5px no-repeat; padding-left:47px; } #left-menu ul li a:hover{ background:url(images/left-menu-hover.gif) 26px 5px no-repeat; text-decoration:underline; color:#CC0000; } #left-menu ul ul { position: relative; top: 0; display:none; margin:0; padding:0; } #left-menu ul li ul li { } #left-menu ul li ul li a:hover{ } #left-menu ul li:hover ul{ display: block; position:absolute; top:325px; padding-right:50px; padding-top:5px; padding-bottom:5px; border-right:#474843 19px solid; border-left:#474843 2px solid; border-top:#474843 2px solid; border-bottom:#474843 2px solid; background-color:#171717; } And here is the HTML <ul id="left-menu"> <li><a href="../index.html">Home</a></li> <li><a href="../domestic.html">Domestic Services</a> <img src="../images/arrow_r.gif"> <ul> <li><a href="../domesticglass.html">Window & Glass Care</a></li> <li><a href="../domesticextbuilding.html">Exteriors of Buildings Cleaned</a></li> <li><a href="../domesticdecking.html">Path Decking & Patio Cleaning</a></li> <li><a href="../domesticconservatory.html">Conservatory Valeting</a></li> <li><a href="../domesticgutter.html">Gutter, Soffit & Fascia Cleaning</a></li> </ul> </li> <li><a href="../commercial.html">Commercial Services</a> <img src="../images/arrow_r.gif"> <ul> <li><a href="../commercialglass.html">Window & Glass Care</a></li> <li><a href="../commercialgutter.html">Gutter & Fascia Cleaning</a></li> <li><a href="../commercialextbuilding.html">Exteriors of Buildings Cleaned</a> </li> <li><a href="../commercialsign.html">Sign Cleaning</a></li> </ul> </li> <li><a href="../quote.html">Quotations</a></li> <li><a href="../waterfedpole.html">Water Fed Poles</a></li> <li><a href="../health.html">Health and Safety</a></li> <li><a href="../faq.html">FAQ</a></li> <li><a href="../photos.html">Photo Gallery</a></li> <li><a href="../aboutus.html">About Us</a></li> <li><a href="../contact.html">Contact Us</a></li> <li><a href="../links.html">Links</a></li> </ul> [sorry if this does not belong in this forum] Google's browser arrives Tuesday...anyone heard how the CSS support for this is?...Microsoft says that their new IE8 (now available in beta) is their most CSS compliant to date (for them, but that's not saying much) Google's "Chrome" launches tomorrow... Google's "Chrome" web browser Hello everyone. I am new to CSS and I have been trying to create a CSS layout composed of a 2x2 grid using DIVs. The top cells have fixed width and height, with the bottom ones having fixed width and variable height depending on the content. I achieved this with success as they look as intended in IE8 (don't have 9 available) and the latest versions of Firefox and Opera. In Chrome (and Safari for that matter), sometimes it will render just fine or look one or two pixels out of place depending on the width of the browser window. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
html,body {
margin: 0px;
background-image: url(http://i.imgur.com/NHbHt.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;
text-align: center;
}
#wrap {
width:750px;
margin:0px auto;
text-align:left;
}
#topleft {
display:block;
margin-left:1px;
float:left;
width:572px;
height:127px;
background-color:#ccc;
padding:0px 0px
text-align:left;
}
#topright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
height:127px;
background-color:#ffffff;
padding:0px 0px;
text-align:left;
}
#bottomleft {
display:block;
margin-left:1px;
float:left;
width:572px;
background-color: yellow;
padding:0px 0px
text-align:left;
}
#bottomright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
background-color:green;
padding:0px 0px;
text-align:left;
}
</style>
</head>
<body>
<div id="wrap">
<!-- Slideshow -->
<div id="topleft">
topleft
</div>
<!-- Logo -->
<div id="topright">
<img src="logo.png" alt="logo" width="175" height="127">
</div>
<!-- Contents -->
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. Praesent non odio velit.
</div>
<!-- Menu -->
<div id="bottomright">
bottomright
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>Sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. </p>
</div>
</div>
</body>
</html>
The lines shown are part of the background, as it was the easiest solution I came across with to make it look like the columns go all the way down to the bottom of the page. So, I believe my issue lies on the DIVs and/or the centered background but I have no idea how to work around this. Thanks in advance for your time and advice. Cheers heres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!! web site: macmillanpc.host56.com/Dreamy_Elegance_template/ please help me! :/ check source, the css is in there (not linked) these is really f... me off. Sorry if its too vague, let me know if you need more details. Hey guys, So if you check out my site at www. paulfenton .tk you can see that I have gone for a slightly different design, with my site entirely encapsulated inside the main page, and the scrolling happening within a contained region. I have turned off the main scrolling I think... however a glitch happens for chrome when you try to select everything in thewindow.(click near the top of the window and hold while moving the mouse downwards). What happens is the whole page scrolls down, which I want to prevent. I have a feeling this is because I have images extending past the visibility of the main screen, but I need this so that everything still looks good for very large screens/resolutsion. If anyone can reproduce this glitch and can help me prevent it that would be greatly appreciated. Thanks, -Paul 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') ; }
Hi, I have a drop down menu which is appearing under some flash. I have given my flash a div wrapper with a z-index of 1 and give the embed a wmode of transparent. I have given my <ul> and <li>'s a z-index of 1000, but still it appears under the flash in Chrome and IE, Any ideas? Thanks |
|||||||