|
CSS - Ie & Mozilla Probs:unwanted Horz Scroll Bar & Css Floating Issues
So I've tried to make my site www.thespinzone.com
work for all browsers, but I'd settle for IE & Mozilla, however I have run into a big problem with IE (and it appears ONLY 7+) and Mozilla, all versions. First the IE problem is that it's adding a horizontal scroll bar on my main page, not the others, and I can only assume it has something to do with the RSS headlines positioning? screen shot 1 Now I'm having 2 problems with Mozilla: 1st: No matter how I try manipulate the CSS, the headlines won't float to the right, and they end up being squeezed next to my picture which is a waste of space and looks silly. Here is a screen shot of how it looks. Ideally I want the headlines to be on the right hand sight of the page, as far as it can be. I WANT the layout to look, MINUS the horizontal scroll bar like that first IE screen shot. 2nd: clicking or right clicking on any of the 'headline' items, moves that entire part underneath my picture and I have no idea why? In case it doesn't do that with your mozilla version, here's a screen shot The relevant CSS is on the index page so rather than me cut & paste it (unless that's preferred) then 'view source'..... I appreciate any and all help and advice. Thanks Similar TutorialsOk the problem is hard to explain but here it goes: I have news items that are divs, inside that div i have a floating left image, then i have the news content. The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style: clear: both height: 0 line-height: 0 but it just seemed to help with one (bringing the second one below the bottom of the page). Does anyone know what might be the problem? Here is the link: http://www.cjweed.com/porttest As you can see IE displays everything like a champ, mozilla likes to mash it together. Please help i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;") in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc any thoughts or anything that could help would be apprciated... regards Hi, I have a table with a scroll bar. My problem is that it works in ie but not in mozilla,netscape7.1, firefox...When I load the page in mozilla, the table is not shown, it's as if it were set to hidden, and it's really weird because the first time that I load the page, the table is shown with the scroll bar just for a moment and then hides..... I used a div tag that contains the table to be shown. I've tried different things as changing the z-index, using the display attribute, but none of them worked. Here is the style defined for the div tag: Code:
div.tableContainer_plegado{height: 420px; overflow: auto; width:100%;}
Please help me! Thanks in advance! Can someone please look at this page in IE7 - http://www.pacunionsonoma.com/temp.asp?city=Santa-Rosa You'll notice the mortgage agent listing clear the left navigation when they shouldn't; also notice the page horizontal scroll. I highlight all elements but don't see which one is causing that unwanted scroll. Thanks. http://cwin.redirectme.net/ext/ch/test.html ^ On IE, this works fine, the parent is red as expected, whereas on Mozilla, the parent has a white background. If i have no floats, it works as expected Hi, I have a table with a scrollbar that works perfectly in ie but not in mozilla. When I scroll up/down in mozilla, the header is not kept fixed as it should be. I use a div that encloses one table with the content. the css code for the div and the thead: Code:
div.tableContainer_plegado{height: 285px; overflow: auto; width:100%;}
//I also tried top:0, just in case mozilla doesn't support the expression element
thead.lista td{position:relative; top: expression(document.getElementById("data").scrollTop-0);}
thanks in advance!! I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars. Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top Thanks I'm having problems getting Mozilla to display my page correctly. I've narrowed it down to being a margins thing. The following code is a simple example of the problem I'm having. 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>Test</title> </head> <body style="margin: 0;"> <div style="background-color:#F00; height: 100px;"> <div style="margin: 20px;">This should be 20px from all sides of the red box</div> </div> </body> </html> This should display as a 100 pixel high red box that spans the width of the browser window and is adjacent to the top of the browser window. The text should be displayed indented 20 pixels from the top left corner of that box. Instead, I am getting a red box with the correct height and width only there is a gap between the top of the window and the box. The text is positioned 20 pixels from left side as it should be but it is not positioned 20 pixels from the top. It looks almost as if it applied the top margin to the red box rather than the <div> containing the text. What's even stranger, if I add a border to the red box: Code: <div style="background-color:#F00; height: 100px; border: 1px solid #000;"> it displays as expected. And not that it matters but IE also displays the original code as expected. Is there something simple that I'm missing here? hello I'm having a problem loading a background image using CSS. The code works fine in IE6 but in Mozilla Firebird and Opera 7 it doesn't display the images at all. All other styles are applied properly but those background images just don't show (in firebird and opera). I am linking the external stylesheet using this code: <link rel="stylesheet" href="/test/includes/style.css" type="text/css" media="all" /> so that's an absolute URL to the CSS file. In this file I create the selector like this: #nav a { background: transparent url(/test/images/bl_curve.gif) bottom left fixed no-repeat; } so that's using an absolute URL for the image. The entire page is valid XHTML and CSS, as confirmed by the W3C validators. Any ideas? Pat I am having problem layout out a series of spans in a row... The code I am using should output: ITEM1 ITEM2 ITEM3 ITEM4 ITEM5 ITEM6 ITEM7 but it is outputting ITEM1 ITEM2 ITEM3 ITEM4 ............................................. ITEM5 ITEM6 ITEM7 It steps down a line when the drop down navigation makes an appearance. The code I have is: CSS: PHP Code: .textbox { position: relative; clear: right; float: left; padding-right: 17px; padding-left: 17px; border-right-width: 1px; border-right-style: solid; border-right-color: #DAEEAC; } a { color: #FF6600; } ul { padding: 0; top: 0px; list-style: none; } li { float: left; position: relative; width: 100px; } li ul { display: none; position: absolute; top: 2em; left: 0; background-color: #e7e7e7; } li > ul { top: 15px; left: 5px; } li:hover ul, li.over ul{ display: block; } HTML: PHP Code: <div id="navbackground"> <div class="navholder"> <table width="600px" height="15" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <span class="textbox"><a href="index.php" class="navtext">Homepage</a></span> <span class="textbox"><a href="packages.php" class="navtext">Packages</a></span> <span class="textbox"><a href="booking.php" class="navtext">Booking</a></span> <ul id="nav"> <li><span class="textbox" style= "height:45px; width: 100px;"><a href="booking.php" class="navtext">Gallery</a></span> <ul> <li><a href="#">Ground Shots</a></li> <li><a href="#">Recent Events</a></li> <li><a href="#">Hen Parties</a></li> <li><a href="#">Lorem Ipmus</a></li> </ul> </li> </ul> <span class="textbox"><a href="contactus.php" class="navtext">Contact Us</a></span> <span class="textbox"><a href="links.php" class="navtext">Links</a></span> </td> </tr> </table> </div></div> I have a page set up with a div overflow set to auto. Works great, until I add a flash file. In firefox etc get no problems, but msie 6 adds a horizontal scrollbar, which seems to scroll just a few pixels. Can anyone help? URL is: http://fostersdev.allit-services.com/test.html Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE. The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal. Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration. Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation. http://neville.f2o.org/nifty_TEMP2.html friends i have table.. that table corner must be in the curve form.. i dont know to do.. plz send the links for my problem curve edge is my output.. for that related css link plz thanks in advance hey all, i have a image which is a link and i wanted to change the blue box around it to something more inkeeping with the site. So i did this css Code:
a.greenToblack {
color:#000000;
font-size:13px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.greenToblack:link {color:#000000; font: Georgia;}
a.greenToblack:visited {color:#000000; font: Georgia;}
a.greenToblack:hover {background-color:#667138; color:#667138; font: Georgia;}
and impletmented it as so Code: <a class="greenToblack" href="product.php?range_id=<?php print ($row->range_id) ?>"><img src="images/tmbnail/<?php print ( $row->tmbnail )?>" width="75" height="75" border="2"></a> it works perfectly in FF but not in IE..... any ideas why?? thanks RF Hello why wont this change the effects of my td Code: #tabs td.start { background:url("/pdp/images/style_images/default/section_on_left.gif") no-repeat left top; }
#tabs td.start a { background:url("/pdp/images/style_images/default/section_on_right.gif") no-repeat right top; font-weight:bold; }
#tabs td.start a:link { color:#fff; }
#tabs td.start a:visited { color:#fff; }
#tabs td.start a:hover { color:#64bfdb; text-decoration:underline; }
#tabs td.start a:active { color:#64bfdb; }
any help much appreciated Hi, I'm having problems with FireFox (or rather it's having problems with my coding). If you go to he http://jigsaw.w3.org/css-validator/...&usermedium=all It's all valid css but http://www.wnv2.com/v11.php shows up funny in FF but looks great in IE/Maxthon. View course for html, but the css code is in the validation link, Any help would be great! Thanks Hi all, I've always learned what I know (which isn't all that much, but wtf) from trying to fathom the source code of cool sites I visit and then attempting to implement those things I like into my own page. I recently visisted a very cool site that uses a CSS drop down menu. The only problem is it's got one level and I want more than that. I've attempted to tweak the code through trail and error and my basic basic understanding of CSS, but to no avail. When you roll over the top level menu, the secondary displays as it should but the 3rd also displays before you roll onto the link that should activate it. I'm sure I'm just missing somethign small but after working on this for a number of days, trying to figure it out, I appeal to you all for help! Thanks in advance for your support and suggestions! Here is the HTML code for the section (I edited it just so you can see what I'm looking for) <div id="navigation"> <ul id="nav"> <li class="nav"><a href="" onclick="return false">Novels</a> <ul class="subnavnovels"> <li class="subnav"><a href="" onclick="return false">Lawson Vampire Novels</a> <ul class="subsubnav"> <li class="subsubnav"><a href="fixer.html">The Fixer</a></li> <li class="subsubnav"><a href="invoker.html">The Invoker</a></li> <li class="subsubnav"><a href="des.html">The Destructor</a></li> <li class="subsubnav"><a href="syn.html">The Syndicate</a></li> </ul> </li> </ul> </li> And here's the CSS code for the nav section: /* NAVIGATIONAL ELEMENTS */ #nav {z-index:3;} #nav a {color:#FFF;text-decoration:none} #nav a:hover {color:#07B6D0;text-decoration:none} li.nav {margin-right:24px;} ul { /* all lists */ padding: 0; margin: 0; list-style: none; } li { /* all list items */ float: left; position: relative; } li ul { /* second-level lists */ display: none; position: absolute; top: 1em; left: 0; padding:3px 7px; border:1px solid #27444C; } li ul ul { /* third-level lists */ display: none; width: 100px; position: absolute; top: 0; left: 140; padding:3px 7px; border:1px solid #27444C; } li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ top: auto; left: auto; } li:hover ul, li.over ul { /* lists nested under hovered list items */ display: block; clear:left; background:url(menubg.png); } .subnavnovels {width:140px;} .subnavshorts {width:140px;} .subnavnonfic {width:160px;} .subnavother {width:170px;} .subnavcommunity {width:170px;} .subnavabout {width:100px;} .subnavcontact {width:100px;} li.subnav {float:none;} li.subsubnav {display:inline;} Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this: i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch.... any help what so ever would be much appreciated thanks in advance N3cr0 Hi Folks, Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area. What it should look like What it sadly does look like If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position. Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised. Hoping someone can help - I've been at this a week. John |
|||||||