|
CSS - Opera Rendering / Menu And Image Positioning
Hello. This is probably not good practice but I have two problems arising with the same piece of code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
background: #cfcf00;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
padding-bottom: 2em;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #303030; } /* end body */
#logo_search {
width: 100%;
min-width: 957px;
max-height: 79px;
padding: 32px 0 0 0;
border: 0;
margin: auto;
overflow: hide;
background: #ffffff; } /* end #logo_search */
#logo_container {
width: 40%;
float: left;
background: #ffffff;
text-align: right;
border: 0;
border-bottom: 1px solid #ffffff;
height: 51px;
padding: 0;
margin: auto; } /* end #logo_container */
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #c0c0c0; } /* end #base */
#main_block {
background: #ff0000;
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content {
background: #ffffff;
border-left: 1px solid #ff0000;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #ff0000; } /* end #main_content */
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
padding: 0;
text-align: right;
border-top: 1px solid #00ff00;
height: 243px;
width: 266px; } /* end #top_main_content #links_table */
#top_main_content ul li {
vertical-align: middle;
color: #0000ff;
border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */
#top_main_content ul li a {
line-height: 26px;
padding-right: 1em;
display: block;
color: #0000ff;
width: 259px; } /* end #top_main_content ul li a */
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content img {
border-bottom: 1px solid #00ff00;
border-top: 1px solid #00ff00;
margin-top: 12px;
text-align: right;
vertical-align: top; } /* end #top_main_content img */
</style>
</head>
<body>
<div id="logo_search">
<div id="logo_container">
</div>
</div>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
<img src="#" alt="" id="main_graphic" height="243" width="687"/>
</div>
</div>
</div>
</div>
</body>
</html>
Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else. Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go. Edited to add: Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this? Similar TutorialsHey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! Hey everyone, The site in question is roadmasterusa.com We've got a site developed that looks acceptable in most browsers, with the exception of Opera and IE8 (though we were able to put in the modify header to roll back to IE7 rendering). The problem is the positioning of the navigation, and some of the other page elements. Now I have been unsuccessful in finding any way about this other than to not support Opera, but we don't want to miss out on that 1% of visitors. I've spent quite some time trying to figure out how to get this site to render right; now I need some expert help. I look forward to anything you suggest. -Troy Oltmanns Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) Thanks! Well, the subject says it all. http://www.virtual-business-options...est/index1.html. On a page I'm developing</a>, I have the three column layout. In IE, Net, FF, it appears fine. But Opera 6 (No folks, I still haven't upgraded!!!) loads the background image completely messed up. But, if you scroll down, it appears fine, and if you scroll back up, it appears fine...oh boy! I'm wondering if this possibly has something to do with the Flash embed. The validator is pointing out several problems with the embed element and, since I'm not familiar with Flash, I don't know how to validate it (or even if it can be). Does anyone have any ideas? Thanks. Tim Hi, I learned css a couple of years ago but am real rusty...anyways, here is an image that i wanted as the background to the top of the page. in the white space, i simply want a horizontal menu with 4 links. i cannot figure out how to position my links in that space correctly. any help appreciated! [/IMG]http://img251.imageshack.us/img251/1333/toplogoinfo.jpg[/IMG] here is the code i have so far: Code: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Precision Truck Painting and Repair</title> <style type="text/css"> .body{ margin:0; padding:0; } #page { width: 800px; margin: 0 auto 0 auto; } #banner { background-image:url(images/jpegs/top_logo_info.jpg); height: 140px; background-repeat:no-repeat; } ul.nav { list-style-type: none; padding-left: 0; margin:0px 0 0 360px; font-family:Arial, Helvetica, sans-serif; } ul.nav li { display: inline; width:115px;} ul.nav a { text-decoration:none; } </style> </head> <body> <div id="page"> <div id="banner"> <div id="top"> <ul class="nav"> <li class="index"><a href="index.html">Home</a></li> <li class="painting"><a href="pages/painting_collision.html">Painting/Collision</a></li> <li class="painting"><a href="pages/body_trailer_repairs.html">Trailer & Body Repairs</a></li> <li class="index"><a href="pages/Contact_us.html">Contact Us</a></li> </ul> </div> </div> </div> </body> </html>
Hey guys, Here's my problem: http://www.3rdcoastpc.com/moonstoys/ Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design. Here's my css: http://www.3rdcoastpc.com/moonstoys/main.css and the HTML: http://www.3rdcoastpc.com/moonstoys/index.html Thanks in advance! Dustin Hi. I've redesigned my site using IE 6. The page can be referenced at http://flashdaddee.com/index_new.html. In order to position the images on IE 6, I've done the following: #myclass { background:transparent url(my_img.gif) no-repeat; background-position-x:xpx; background-position-y:ypx; } Unfortunately, this does not work with Netscape, Opera, or Firefox. Can someone please give me some directions as to how to accurately position my images on these browsers? Your help is most graciously appreciated. Thanx. I intend to write separate pages for each browser and re-direct to the appropriate UA upon detection. If you could provide a script that does this, or direct me where to go to find such a script, I would also be most grateful. hi guys, i've modified a script that i found on the web that creates a CSS dropdown menu (without using any javascript whatsoever). The menu's work flawlessly in Google Chrome, Firefox and IE 7/8. However, IE 6 like usual is giving me a problem. However, it is only a minor problem but i cant seem to fix it. Please find attached a copy of my HTML and CSS code. Please note:- The css code in the test.txt file is used for styling in all browsers. The css code found in the test_dropdown_ie.txt file is for IE 6 only. If you create these files and open test.html in IE 6 then it will appear fine at first. But if you hover over one of the menu's in the middle, then you will notice that the left hand border of the resultant dropdown menu does not display. However, it does display when you hover over one of the options on the resultant dropdown menu. I need the left hand side border to appear at all times. I did manage to get it working by changing the following CSS rule:- Code:
.menu ul li a:hover ul
{
left: -1px;
}
I changed this to:- Code:
.menu ul li a:hover ul
{
left: 0;
}
This solved the disppearing left hand side border issue but it threw up an even worse issue. If you make this fix and hover over the first or last menu item, you will notice the border of the dropdown menu does not line up with the top menu. I do not like this and find it less acceptable than the initial problem. What i need to do is find a way of lining up the top menu's border with the resultant dropdown menu's border and stop the disappearing left hand side border issue. Any help would be greatly appreciated. Thanks. hi, http://notabene.morator.com/main.php is displayed ok in all 3 browsers - IE, Opera and Firefox. But try to login with username "test" and password "test". in IE and Opera the horizontal menu gets messed up. please view the source after login and tell me where the problem is if you can find it. The weird thing is that actually it is the same main.php page before and after login, only difference is that in menu "logout" link is displayed instead of "Login" link. all other stays same. I dont know WTF is happening with that. any help very appreciated. regards Notabene ------------- FIXED I'm hoping I can get some guidance on why I can't get this popout menu to work! I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too. If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me! Thanks in advance! Chelsea I'm starting to get a headache trying to figure out what the problem is with Firefox on this issue... A highlighted menu should drop down over the div beneath it. It works fine in Opera & IE, but Firefox gets moody about it. geekville.net Any ideas? Thanks! EDIT: Nevermind, I made it work. 2am is a good time to stop writing css. Ive noticed this is only a problem in IE6(and probably some more older browsers)...Firefox 3 and IE 7 it works fine. Visit this site: (you will have to do it twice because you need to login first.) http://ronnieswietek.com/flashden/newsletter/newsletter.php?do=preview&id=2 u: admin p: testadmin I put a blue background on the div so you can understand what I am talking about. If you look at it in firefox, the blue covers the whole newsletter, text and images, but if you look at it in IE, it only does a small portion of it...Can anyone figure out this mystery??? CSS for that section: Code:
#newsletter_subject
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
#newsletter_preview
{
overflow: auto;
background-color:#000066;
}
#recipients
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
and then the corresponding html: Code: <div id="newsletter_subject">flashden newsletter!</div> <br> <div id="newsletter_preview"><font size="6"><span style="font-weight: bold; color: rgb(153, 255, 153); font-family: georgia;">flashden <span style="text-decoration: line-through;">is</span> <span style="color: rgb(204, 0, 0); background-color: rgb(0, 0, 0);">awesome</span> <span style="font-family: impact; font-style: italic; text-decoration: underline; color: rgb(153, 255, 0); background-color: rgb(0, 51, 204);">I</span>!</span></font><br> <br> <img style="width: 202px; height: 261px;" alt="" src="http://flashden.net/new/site_flashden.net/interface/logo_top.gif" align="left"><br> </div> <br> <div id="recipients">This Newsletter WILL be sent to the following users:</div> etc..... Just when I think I've finally seen it all, every way these browsers can **** up, there's always one more. This morning I discovered that Netscape 7 / Win does not properly render an a element with image content. My example demonstrates that both IE 6 / Win and Netscape 7 / Win both have issues rendering a elements with text content also. This seems like really basic stuff . . . how, HOW could Netscape 7 not be able to render the a with image content correctly??? (Another good question is why this forum doesn't allow you to upload HTML files . . . WTF?? -- you'll have to rename the file to .html) I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link I'm having trouble for some reason with a Navigation Position. For some reason it defaults 40px from the left and I can't make it appear left. code as follows: #nav { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #nav li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; font: bold 12px arial; } #nav li a { display: block; float: left; margin: 0px 0px 5px 0px; padding: 6px 0px; width: 108px; color: #FFFFFF; text-align: center; text-decoration: none; } #nav li a:hover { background: #333333; color: #FF0000; } #nav div { visibility: hidden; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100px; border: 1px solid #5970B2; text-align: center; font: 12px arial; font-weight: bold; } #nav div a { position: relative; display: block; margin: 0; padding: 7px 0; width: 100px; text-align: center; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial; font-weight: bold; } #nav div a:hover { background: #49A3FF; color: #FFF } Any help would be appreciated. Mike Hello there, I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified. So far I have been able to make the CSS compatible with both firefox and IE. So far I've got Code: <table width="100%" bgcolor="#666666"> <tr> <td> <img src="images/logo.gif"> </td> <td> <div class="menu" style="text-align:center"> <div class="outerFirst"><a href="index.php"><span>Home</span></a></div> <div class="outerFirst"><a href="index.php"><span>Services</span></a></div> <div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div> <div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div> <div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div> <div class="outerFirst"><a href="index.php"><span>About</span></a></div> </div> </td> </tr> </table> and for the CSS Code:
#menu {
height: 54px;
margin: 3em 0; padding:0 1em;
border-bottom: 0px solid black;
}
div.outerFirst {
float: left;
width: 100px; height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
div.outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:100px; height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
div.outerFirst span {
height: 54px;
display: block;
margin:0; padding: 25px 0px 0px 0px;
}
I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it. Any help with the CSS and html (if I've missed something) would be awesome. Thanks! - K Hey guys. New to the forum and CSS in general! So that said, sorry if this seems like a noobie issue, but would love and appreciate a helping hand. Here's the situation... Was contracted to revamp a website of a local artist. This was a very low budget job and had to bang out this site quickly to cover the little money that was available ($500). I got it done and the client is happy, but i'm noticing a positioning issue between IE and Firefox. Strangely, IE is displaying the page the way i would like and Firefox is not (backwards huh?). Anyway, the problem is the sub navigation UL appears to be indented about 50px. I want it to line up with my table. Anybody have any ideas? Also, I understand that IE sometimes doubles padding/margin values for floated div's, but in this case I like the way it is dispalying in IE. It seems too crammed in Firefox. I'm not sure exactly how or why this happens, but would love to know what i'm doing wrong so that I can have a little bit of cross-browser consistency. Is this just a pipe dream? lol. Here is the site: w w w . mallykhorasantchi.com/gallery.htm (sorry for the spaces, but I can't post a url??) Thanks a bunch for your help. Cheers, George iHelp, llc |
|||||||