CSS - Scrolling Div In Explorer (width:100%) Problem
Hi.
I have a table cell <td width="100%"> then a div <div style="width: 100%; height: 400px; overflow-x: scroll; overflow-y:scroll;"> then a table that are wider than td above. I firefox the div is not wider than the td above. In IE7 (not tested in IE6), the DIV does force the td above to be wider than it should. is there a way to make this work in IE7 as it should. Is it a bug in IE7? Any workarounds/ solutions for this?. If not possible to do with CSS then I would appreciate a workaround suggestion. Could I put an image or other element within the TD and set that width to 100% to make it as wide as the TD, and then user javascript to find actual pixelwidth of image or other element, and then use javascript to reset the width of the DIV..... Anybody??? Need it to work in IE6, IE7 and Firefox. Similar TutorialsHi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. having a problem ;-) Why else post here right ?? well please have a look at http://www.furastadesigns.com/kfn/ using firefox,, see the pulldowns ? they are correctly sized when the pulldown is dropped. But in Explorer they are keeping the same size as the mainbox (not the pulldown) I tried controlling the option tag but using width:; but that works only in firefox. Any ideas on how to make the option (the pulldown list) bigger then the main box in firefox ??.. Thanks alot... I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine. Please check it he ucables.com/search/iphone css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance Hello, I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> html { min-width: 750px; } body { margin: 0; padding: 10px 0px; background: #ff0000; } div#wrap { width: 750px; margin: 0 auto 10px auto; padding: 0; text-align: left; background: #ffffff; border: 1px solid #d1c7ac; } div#innerwrap { width: 720px; margin: 0 15px; padding: 8px 0; border: 1px sold #ff0000; } #body { padding-top: 10px; } #left { display: inline; width:510px; height:510px; } #box { border: 1px solid #d1c7ac; float: left; color: #000000; font-size: 8pt; overflow: hidden; width:250px; height:220px; } #right { height:510px; text-align: center; border: 1px solid #d1c7ac; } </style> </head> <body> <div id="wrap"> <div id="innerwrap"> <div id="body"> <div id="left"> <div id="box" class="top-left"> Box 1. </div> <div id="box" class="top-right"> Box 2 </div> <div id="box" class="middle-left"> Box 3 </div> <div id="box" class="middle-left"> Box 4 </div> </div> <div id="right"> This is the right text </div> <br> last line </div> </div> </div> </body> </html> Is there maybe a hack I can do to internet explorer so that this element will be solved? or my css is completly wrong, and I need to change it? Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css. thanks for any sugestions, regards, sim085 I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine. Please check it he ucables.com css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page. It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though. Can someone have a look at it for me ? Thanks in advance ... :-) http://www.EnglishTeachingKorea.com Hi all, Normally I'm faithful to table layout in my page design, but try to stay aware of how CSS is comming along at least as far as browser compatibility issues go. I've been wanting to use CSS for its transperancy abilities, and with my first trial page I've sadly run into same reasons I've steered away from CSS for so long. Hopefully all is not lost, and I may find help here. My problem is with a div that has a background image, and another div inside that containing the text which uses semi tranperant background color and "overflow : auto" to set the text apart from the background and allow scrolling. In IE, everything looks beautiful, and I wondered for a moment why I stayed away form CSS for so long. Then I tried Mozilla... Scrolling the text in the div is painfully slow and unresponsive to the point its almost impossible to move where you want in the text. The opaque background changes in color once you move down and leaves a seperation between the two colors or opacity, and generally works poorly. Here is the link, and the source is small: http://coinmonger.com/now.html Hopefully this is due to my lack of expertise using CSS, and a work-around is available. Currently I've downsized the background image hoping it was image size that was causing the problem (as this is just a quick test to see if I could do this), but no change. The page even loads slower using the "moz-opacity" attribute. Any input is appreciated! Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code: #content { position: relative; margin-left: auto; margin-right: auto; padding-right: 25px; padding-left: 25px; font-family: Verdana,Arial,helvetica, sans-serif; font-size: 11px; text-align: justify; overflow: auto; width: 543px; height: 225px; background-image: url(img/centerblank.jpg); background-repeat: no-repeat; _background-attachment: fixed; } FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? Hey, I use floats in my page to position some div's. The page validates for both css and html-strict. When i run the code below in firefox, everything works fine. When i run it in Internet explorer, it does not. It looks messed up then. PHP Code: echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">'; while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){ echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">'; echo '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'"> '; echo $contact['first_name'] . ' ' . $contact['last_name']; echo '</div>'; echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">'; echo '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>'; echo '</div>'; } echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">'; echo '<br>'; echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">'; echo '<br><br>'; echo 'Total '.$nr_of_rows.' Contacts'; echo '</div>'; echo '</form>'; hope you can help me. thanks in advance Hi guys and gals. I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> Hi, I have modified a form for a web blog for a friend, and got extra fields included for them. But we have an issue on the pc with internet explorer and the position of the elements in css. On safari and opera and firefox, all the labels for the form tags line up correctly, but on internet explorer they do not, the message label is lined up with the address, how can we fix this. If you look at this page: http://website-traffic.inpress.co.uk/contact-us/ You can see what we mean with the form. How can I fix this problem with the css to get them all correctly lined up. Many thanks Barry I'm having a little trouble with the Overflow attribute on my side scrolling website. I have uploaded 2 versions one and two of the same site, one with
Code: overflow:hidden; overflow-x:visible; and one with just. Code: overflow:hidden; the first one is completely static in safari and won't scroll at all but scrolls really nicely in firefox (with a scroll wheel as there are no scroll bars). The second one has a horizontal scroll bar but goes really wierd and starts scrolling horizontally as well which I don't want to happen as it messes up my site. Is there a way to get the site to scroll horizontally without scrolling vertically? I have tried it both this way and by only using Code: overflow-y:hidden; but it has similar results. Any help on this would be greatly appreciated Hello, I have set up a scrolling div area on a page I'm working on. In IE it is displayed nicely, but in Foxfire/Mozilla the div seems to have a top margin of around 6px. I've done everything I can think of to get rid of it, but it's still there. I'm thinking it's probably the way that it's being rendered by the browser, but I don't have any idea how ti fix it. If you could help that would be great.. PHP Code: div.main_page_scroll { height: 186px; width: 210px; overflow: auto; scrollbar-base-color: #C7E9FB; scrollbar-track-color: #C7E9FB; scrollbar-face-color: #C7E9FB; scrollbar-highlight-color: #C7E9FB; scrollbar-3dlight-color: #AEC9D6; scrollbar-darkshadow-color: #AEC9D6; scrollbar-shadow-color: #C7E9FB; scrollbar-arrow-color: #AEC9D6; font-family: tahoma; font-size: 9px; color: #211F1E; text-align: left; background-color:#C7E9FB; } thanks, Chris I have a image marquee on a page and sometimes only the top halves of the images show up. usually after refreshing the page the full images show up but I still want to fix it. I've tried adjusting the overflow but it doesnt change it, and i cant figure out where in the code the problem is. heres the page with the marquee http://myspace.com/hheyh222 and here's the code for the layout. Code: <p><style> td.text td.text table table table, td.text td.text table fffbr, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;} .FriendsComments table table {display:none;} .friendsComments td {height:0px;} .FriendsComments td {background-color:transparent;} .FriendsComments td td b a {display:inline;} table table,table table table table,table table{background-color:transparent;width:300px;border:0px;} div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;} ffffffa.navbar,font,.whitetext12,.btext,.orangetext15,.redbtext,.redtext,.blacktext12,.lightbluetext 8,strong,.blacktext10,.nametext,div b font font, div font font u,table table table table, table table table table td.text, td.text td.text table,table.contacttable{display:none;} .latestBlogEntry {display: none;} table tr td div div{ visibility:hidden; display:none; border:0px!important; background-color:transparent; }tr {background:transparent;} div table form tr td,td.text table,a.text, table div font div table form tr td,td.text table,a.text, table div font a, table div div,{visibility:hidden;di-splay:none} td.text table table {display:inline; visibility:visible;} embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;} div table td font {display: none;} body div table td form option{display:none!important;} body div table td form select{display:none!important;} body div table td form {display:none!important;} font, br, p, div, table { color: 000000; font: 8pt arial; text-align: justify;} u{ color: 000000; font: 8pt arial; letter-spacing: 1px} i { color: 000000; background-color:f0ff00; font: 8pt arial; letter-spacing: 2px} s { color: 000000; font: 8pt arial; letter-spacing: -1px} b { color: 00aeff; background-color: ffffff; font: 8pt arial;} a:link, a:visited, a:active { color: be003a; font: 8pt arial; text-align: justify;} body{scrollbar-3dlight-color:000000; scrollbar-arrow-color:ffffff; scrollbar-track-color: ff2467; scrollbar-darkshadow-color:000000; scrollbar-face-color:000000; scrollbar-highlight-color:ffffff; scrollbar-shadow-color:000000;} .head1 { color: ffffff; font: 8pt arial; letter-spacing: 1px; padding: 0px; background-color: 00aeff; text-align:left; text-transform:uppercase; border-bottom: 0px dotted; border-color: transparent; display: block;} .head2{ color: ffffff; font: 7pt arial; letter-spacing: 1px; padding: 0px; background-color: transparent; text-align:right; text-transform:lowcase; border-bottom: 0px solid; border-color: transparent; display: block;} a:hover{ color: transparent; letter-spacing: 0px; font: 7pt arial; padding: 0px; background-color: transparent; text-transform:lowcase; border-bottom: 0px solid; border-color: transparent;} input.comment4 { color:ffffff; font-size:8px ; width:150px ; height:15px ; font-family:arial; background-color:ff2467; border-color:000000 ; border-width:1px ; border-style:solid ; letter-spacing:1px ; text-transform:uppercase ; line-height:7px ; font-weight:normal ;} textarea.box4{ background-color:ff2467; width:150px ; height:50px ; font-family:georgia; color:ffffff; line-height:13px ; font-size:11px ; border-color:000000 ; border-style:solid ; border-width:1px ; letter-spacing:1px ; font-weight:bold ; } </style> </HEAD> <BODY background=http://img340.imageshack.us/img340/8715/85p9j4iay0.png> <div style="position: absolute; left:0px; top:0px; overflow: auto; visibility:visible; z-index:0;"> <img src="http://img512.imageshack.us/img512/2333/layoutcopy2ev4.gif" alt="WOO" /> <a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" style="position:absolute; top:450px; left:565px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px;"></a> <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5 JmZyaWVuZElEPTQ2MTI4NjUy" style="position:absolute; top:380px; left:760px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px;"></a> <a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmll bmRJRD00NjEyODY1Mg==" style="position:absolute; top:490px; left:685px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px; "></a> <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00 NjEyODY1Mg==" style="position:absolute; top:575px; left:575px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:120px; height:60px; "></a> <a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDYxMjg2NTI=" style="position:absolute; top:580px; left:770px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px; "></a> </div> <div style="position: absolute; left:10px; top:350px; width:530px; height:330px;overflow: auto; visibility:visible; z-index:0;"> <center><br><br><br><br> <img src="http://img293.imageshack.us/img293/8942/finalsmallerxw1.gif" alt="Image Hosted by ImageShack.us" /><br><bR> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>Music</OPTION> <OPTION>Suicide God Pill</OPTION> <OPTION>Fischerspooner</OPTION> <OPTION>Kimya Dawson</OPTION> <OPTION>Klaus Nomi</OPTION> <OPTION>Marilyn Manson</OPTION> <OPTION>Brian Eno</OPTION> <OPTION>Meg Lee Chin</OPTION> <OPTION>White Stripes</OPTION> <OPTION>Kidney Theives</OPTION> <OPTION>Mika</OPTION> <OPTION>The Eels</OPTION> </SELECT><br><br> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>Movies</OPTION> <OPTION>Hedwig And The Angry Inch</OPTION> <OPTION>Phantom of the Paradise</OPTION> <OPTION>Velvet Goldmine</OPTION> <OPTION>Donnie Darko</OPTION> <OPTION>Muppet movies</OPTION> <OPTION>Zeitgeist</OPTION> <OPTION>Tarnation</OPTION> <OPTION>Rocky Horror Picture Show</OPTION> <OPTION>The Dreamers</OPTION> <OPTION>Harry Potter</OPTION> <OPTION>Shortbus </OPTION> </SELECT><br><br> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>TV</OPTION> <OPTION>The Muppet Show</OPTION> <OPTION>Will & Grace</OPTION> <OPTION>Queer as Folk</OPTION> <OPTION>That 70s Show</OPTION> <OPTION>Mr. Bean</OPTION> <OPTION>Freaks and Geeks</OPTION> <OPTION>Still Standing</OPTION> <OPTION>Threes Company</OPTION> <OPTION>The Riches</OPTION> </SELECT><br><br> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>Books</OPTION> <OPTION>Harry Potter</OPTION> <OPTION>Disco Bloodbath/Party Monster</OPTION> <OPTION>Freakshow</OPTION> <OPTION>Junior</OPTION> <OPTION>It's Kind of a Funny Story</OPTION> <OPTION>The Picture of Dorian Grey</OPTION> <OPTION>A Clockwork Orange</OPTION> <OPTION>etc.</OPTION> </SELECT><br><br> <img src="http://img216.imageshack.us/img216/3830/stuffscopyhn5.gif" alt="Image Hosted by ImageShack.us" /><br><br> <img src="http://img20.imageshack.us/img20/9248/poliwhirlwooonw3.gif" alt="Image Hosted by ImageShack.us" /><br><br> <a href="http://www.msplinks.com/MDFodHRwOi8vdG90YWxseWpzai5wcm9ib2FyZHM1NC5jb20vaW5kZXguY2dp" target="_blank"> <img src="http://img338.imageshack.us/img338/841/jamesbannerlb1.gif" border="0" alt="TOTALLY JAME ST JAMES" /></a><br><br> <img src="http://img211.imageshack.us/img211/9954/2bannerfinishedee6.gif" alt="Image Hosted by ImageShack.us" /> <br><br> <A HREF="http://www.msplinks.com/MDFodHRwOi8vd3d3LmNhZmVwcmVzcy5jb20vdmF1Z2hubWljaGFlbA==" TARGET="_blank"><IMG SRC="http://members.aol.com/sharksgp/vaughnshopbanner500.gif" WIDTH="500" HEIGHT="134" ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="MY OFFICIAL STORE"></A> <br><br> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:435px; visibility:visible; height:270px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=30916882"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=30916882" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> </object> </div> <div style="position: absolute; left:595px; top:180px; width:130px; height:170px; overflow: visible; visibility:visible; z-index:0;"> <marquee> <a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3ZhdWdobl9taWNoYWVs><img border=0 src=http://img507.imageshack.us/img507/4663/vaughnpicro8.jpg> </a> <a href=http://www.msplinks.com/MDFodHRwOi8vbXlzcGFjZS5jb20vc3VpY2lkZWdvZHBpbGw=><img border=0 src=http://img296.imageshack.us/img296/9289/suicidegodpillpicby1.jpg> </a> <a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2t1cnRteXNleHltYW4=><img border=0 src=http://img181.imageshack.us/img181/1350/alyssapicrl1.jpg> </a> <a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3BhcmtlcnJ5YW5tdXNpYw==><img border=0 src=http://img410.imageshack.us/img410/7487/parkerpicap6.jpg> </a> </marquee> </div> <div style="position: absolute; left:245px; top:220px; width:200px; height:170px;overflow: auto; visibility:visible; z-index:0;"> <center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"> <input name="friendID" value="46128652" type="hidden"> <textarea name="f_comments" class="box4">Leave me a comment</textarea><br> <input type="submit"class="comment4" value="? submit"></form> </div> Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much me again, i fixed my last problem just to run into another i messed a little with my code, so that i have 2 elements on the page 'fixed' (in FF and IE) and the main body part is scrollable. the complete site is here i cannot seem to set a minimum width for the browser window. try to resize the window and you will see, that the main bodywindow will maintain at least 500px width in Firefox (not in IE < thats prob no.1) -- but also does the main body window slip underneath the navigation to the left. i tried to change the z-value, but even if i give them both the same z-value it slips underneath it. it would be great, if someone could help me with this problem, i know i have to correct it somewhere in the css, but cannot find it EDIT solved problem.... okay, so i just positioned (absolute) the bodybox element a fix amount away from the left border of the screen -- before it was 10% away from the right border of the screen .... it doesn't seem that liquid anymore, but i can live with it .... now i just need to convince IE to maintain a minimum width .... which topic has been discussed before EDIT2 i added the line Code: width: expression(document.body.clientWidth < 781 ? "780px" : "100%" ); to my fixed4ie.css file .... this messes on my old IBM ('95) around a little and i am not sure if you can see the graphic delay on newer computers. this is the only thing that worked for me so far .... interesting enough there are no more scrollbars, once i go under that certain width .... if - by now - someone has an idea how to fix this, i would appreciate other solutions to this problem hi, wonder if someone can help me. I'm trying to create a css layout for a site, which has a header then two vertical columns (pretty standard). i want the first column to be a set size and the second content column to be variable to use up the rest of the page space. i can get the first column and header to work fine but not the second content column. any help would be good. here my code: Code: #header { margin: 20px 20px 0px 20px; padding: 10px; border: 1px solid #666; background: #ccc; height: 100px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; height: 70px; } html>body #header { height: 70px; /* ie5win fudge ends */ } #menu_v { position: absolute; top: 120px; left: 0px; margin: 20px; padding: 10px; border: 1px solid #666; background: #ccc; width: 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 120px; } html>body #menu_v { width: 120px; /* ie5win fudge ends */ } #content { position: absolute; top: 120px; right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */ margin: 20px 20px 20px 190px; padding: 10px; border: 1px solid #666; background: #ccc; } http://www.veracon.net/qwaffle/ If you look closely in Firefox, the content holder (left and right) is one pixel too small - it's meant to be the same size as the header. I don't see why this is happening, as it looks fine in IE. I could use some help. |