|
CSS - Chrome Cutting Off Background Of Buttons
Hey there so im brand new here but ive been really frustrated with this problem im having today, it seems that google chrome is cutting of the background hovering image I am using for my navigation, here is a live link of the error. It seems to work fine for me in firefox. I am at a complete loss, any help would be greatly appreciated! I added a bright green background so that it is easier to see the error, it seems there is this mystery space below the text that should be padded 6pixels to show the view of the background hover image and its just not working .
Thanks, Eric hxxp://69.65.41.169/~ehowardd/navigationerror/test.html Ment to add here is the CSS Code: Code: #navigation {
width:500px;
float:right;
padding: 40px 0 10px 0;
background: #0f0;
}
#home
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#home:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#home span
{
margin-left:26px;
margin-right:26px;
}
#aboutus
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#aboutus:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#aboutus span
{
margin-left:17px;
margin-right:17px;
}
#services
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#services:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#services span
{
margin-left:17px;
margin-right:17px;
}
#portfolio
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#portfolio:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#portfolio span
{
margin-left:19px;
margin-right:19px;
}
Similar TutorialsHi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } I feel like I've been posting a lot of questions lately and I attempted to search for an answer on this one as it should be something simple. However, the search wasn't cooperating with me. Anyway, here is the latest problem: http://www.sprechereast.com/documents.html In Firefox, the brown left navigation bar cuts off when the content on the right is shorter than the nav bar. Seems to display correctly in IE6, but I realize that FF is technically correct and there is something wrong in my CSS. Funny thing is, I'm certain this worked in the past as I've had this site up problem free for awhile. I'm thinking this might have happened with the latest FF update. Is this possible? Once again, thanks in advance for the help and any links to good reading material on the subject. Hey, I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great! I have five buttons that do not show up on firefox, and the images are called into play through CSS using background. You will find the code below: This is the CSS: Code:
.borderBelowNav
{
position: absolute;
top: 0;
left: 80px;
width: 937px;
height: 141px;
z-index: 2;
}
img.borderBelowNav
{
display: block;
margin-left: auto;
margin-right: auto;
}
.divNav
{
position: absolute;
top: 55px;
left: 175px;
width: 785px;
height: 61px;
z-index: 3;
}
ul#mainNav,
ul#mainNav li
{
margin: 0;
padding: 0;
}
ul#mainNav li
{
display: inline;
}
ul#mainNav li a
{
width: 138px;
height: 69px;
}
ul#mainNav li#quienesSomos a
{
width: 138px;
background: url(../images/quienesSection.gif)
no-repeat 0 0;
top: 0;
left: 0;
}
ul#mainNav li#quienesSomos a:hover
{
background-position: 0 -72.9px;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a
{
width: 138px;
background: url(../images/campamentosSection.gif) no-repeat 12px 0;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a:hover
{
background-position: 12px -71.2px;
top: 0;
left: 0;
}
ul#mainNav li#noticias a
{
width: 150px;
background: url(../images/noticiasSection.gif) no-repeat 14px 0;
top: 0;
left: 0;
}
ul#mainNav li#noticias a:hover
{
background-position: 14px -72.5px;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a
{
width: 150px;
background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a:hover
{
background-position: 0px -76.1px;
top: 0;
left: 0;
}
ul#mainNav li#contactos a
{
width: 150px;
background: url(../images/contactosSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#contactos a:hover
{
background-position: 0px -72.2px;
top: 0;
left: 0;
}
This is the HTML: Code: <img class="background" src="images/treesInFog.jpg" alt="" /> <img class="innerBackground" src="images/bgroundmain02.jpg" alt="" /> <!--This div is for the black border behind the nav--> <div class="borderBelowNav"> <img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" /> </div> <div class="divNav"> <ul id="mainNav"> <li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li> <li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li> <li id="noticias"><a href="#" title="Noticias"> </a></li> <li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li> <li id="contactos"><a href="#" title="Contactos"> </a></li> </ul> </div> Hello Everybody, I am trying to figure out why IE is cutting off the foot of my title. It works just fine in firefox. I tried setting a height and it showed the bottom but cutoff the top. If anyone has any suggestions as to why IE is cutting off the bottom I would be very thankful. Website with Title cut off at bottom I am experiencing a strange bug where if the content of another div goes past the right edge of the screen, my header div does not reach, even though it is at width: 100% Here is the code: index.php Code: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css" type="text/css" media=screen /> <link rel="stylesheet" href="menu/menu_style.css" type="text/css" /> <title> Home - Nortrat Consulting </title> </head> <body> <div class='header'> Nortrat Consulting<br/> <div class="slogan">Building On The Northern Strategy</div> </div> <div class="sidebar"> <div class="sidehead">Sections</div> <a class="side" href="#heading1">TEST HEADING<a/><br/> <a class="side" href="#heading2">TEST HEADING<a/><br/> </div> <div class="menu"> <ul class="menu red"> <li class="current"><a href="" target="_self">Home</a></li> <li><a href="" target="_self">Northern Strategy</a></li> <li><a href="" target="_self">Building on the Northern Strategy</a></li> <li><a href="" target="_self">How NORSTRAT Can Help</a></li> <li><a href="" target="_self">About Lee Carson</a></li> <li><a href="" target="_self">Northern Strategy news blog</a></li> </ul> </div> <div class="menughost"></div> <div class="container"> <a name="heading1"><div class="heading">Test Heading</div></a> BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB <div class="imagecaption"> <img src="Picture1.jpg" alt="picture1" width="250"/><br/> Almost half our land and two thirds of our coastal water lies in the North. </div> </div> <div class='footer'> FOOTER TEXT </div> </body> </html> main.css Code: .header
{
height: 100px;
background: #CC0000;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
font-family: Trebuchet MS Bold;
color: #000000;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
font-size: 26px;
font-weight: bold;
}
.container
{
margin-left: 155px;
margin-top: 105px;
font-family: Trebuchet MS Bold;
color: #000000;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
font-size: 11px;
font-weight: bold;
}
a.side:link
{
text-decoration: none;
color:#777777;
}
a.side:visited
{
text-decoration: none;
color:#555555;
}
a.side:hover
{
text-decoration: none;
color: #66CCFF;
}
a.side:active
{
text-decoration: none;
color:#777777;
}
.heading
{
font-size: 14px;
color: #3399CC;
text-decoration: underline;
}
.imagecaption
{
font-size: 10px;
color: #777777;
text-align: center;
width: 250px;
}
.slogan
{
font-size: 13px;
font-style: italic;
}
.sidehead
{
color: #000000;
text-decoration: underline;
}
.sidebar
{
padding-top: 5px;
border-right: solid 1px red;
width: 150px;
text-align: right;
padding-right: 5px;
position: absolute;
left: 0px;
top: 100px;
font-family: Trebuchet MS Bold;
color: #000000;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
font-size: 11px;
font-weight: bold;
}
.footer
{
text-align: right;
font-size: 11px;
border-top: solid 1px red;
margin-top: 25px;
height: 100px;
width: 100%;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */
#nav-menu
{
width:30em
}
menu_style.css Code: ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
border-right:none;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
.menu
{
width: 900px;
position: absolute;
left: 0px;
top: 33px;
z-index:1;
border-right:none;
}
.menughost
{
background:url(images/bg.png) repeat-x top left;
width: 100%;
height: 33px;
position: absolute;
left: 0px;
top: 66px;
z-index:0.5;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
And a screenshot of the issue: (the red area is my header) My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about 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;
}
So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. 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 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 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? 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 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). 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...???? [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 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. |
|||||||