|
HTML - Div Text Overlapping Div Header, Browser Incompatibility
Hi all,
I'm new to this site, I hope someone can help me figure out what on Earth I've done wrong. I've been editing this website to a new, CSS layout with DIVs instead of frames and tables. In my browser, IE6, it looks PERFECT, but in IE7, the DIV with the navigation text is overlapping the DIV with the header image, and in Firefox 2.0.0.16, the DIVs might as well not even be there--all the text runs right on top of the image! A screencap of what it looks like in my browser is he http://i44.photobucket.com/albums/f3...ta-browser.gif A screencap of how it's turning out in IE7: http://img.photobucket.com/albums/v6...IE7Version.jpg Firefox screencap: http://i44.photobucket.com/albums/f3...layout-cap.jpg I have no idea what I've done wrong, or why it shows up perfectly in one browser, but not in any other. The page used in the example is here, so you can see how it is on yours and peruse the code for mistakes: http://cityofdemons.com/lmr.html Thanks in advance for anything you can tell me! Similar TutorialsHi there, Im sorry to be bringing up this rather well trodden topic, but after extensive searching through forums and trying everything I could find, I must admit I need some expert advice. Building a website, mostly html, with a small amount of css for text. Site works well in safari, firefox, chrome, but not IE. IE (7) displays the top navigation bar section, but ignores the rest of the site. Ive been trying to validate and fix all the problems, but some of the issues raised I cant fix without changing the site's appearance. I dont believe my css is complex, and other info sites have suggested what Ive used should be supported by IE7. The only thing I can now think is that for some reason ie7 doesnt recognise the second table onwards. I am sorry to be using tables - this may be my downfall - but my client wanted to have the site as accessible across the world (and so rubbish olf browsers etc) so I wanted to use as little css as possible. Any suggestions would be very much appreciated, Lindsay the url is: http://www.mosaiccreative.co.uk the css is as follows: @charset "UTF-8"; p { margin-left: 34px; margin-right: 30px; margin-top: 30px; font-family: verdana; font-size: 14px; font-weight: lighter; line-height: 16px; color: #333333; } h1 { margin-left: 161px; margin-top: 2px; font-size: 14px; font-family: verdana; font-weight: lighter; color: #333333; } h2 { margin-left: 30px; margin-top: 0px; font-family: verdana; font-size: 12px; color: #993300; font-weight: lighter } h3 { margin-left: 0px; margin-top: 6px; font-size: 12px; font-family: verdana; font-weight: lighter; line-height: 25px; color: #333333; } h4 { margin-left: 167px; margin-top: 0px; font-family: verdana; font-size: 12px; font-weight: lighter; color: #333333; } h5 { margin-left: 135px; margin-right: 30px; margin-top: 0px; font-size: 14px; font-family: verdana; font-weight: lighter; line-height: 16px; color: #333333; } h6 { margin-left: 34px; margin-right: 30px; margin-top: 0px; margin-bottom: 0px; font-family: verdana; font-size: 14px; font-weight: lighter; line-height: 16px; color: #333333; } .style2 { font-family: verdana; font-size: 12px; } .style3 { font-family: verdana; font-size: 14px; font-weight: bold; text-decoration: underline; } .style4 { font-family: verdana; font-size: 14px; font-weight: bold; } .style6 { font-family: verdana; font-size: 14px; font-weight: normal; text-decoration: underline; } I am having a problem with my website in some screen resolutions and I can't figure out the problem. My site is www.911eda.com There are three gray boxes in the middle of the site with a red heading. At the bottom is a Read More button that changes when you hover (using css). In some resolutions, that button is overlapping the end of the text above it. Can you help? hi guys I would really appreciate any advice on this matter I am building a wesite for my boss, and when i open a page my text goes under the jquery slide show...but that happens only when I enter the site,any other page or if i refresh the page it works fine....why does it happen only once? any ideas? hi, i've designed a website mainly in photoshop and sliced up and exported the finished images. However after adding headers(<H1>etc) in the main column, when testing the site in Firefox the graphics, flashmovies etc are pushed down the page and now unaligned with the background images by the header text because it is also now starting lower down the page than it did before in Explorer, which basically makes it look crap. The whole thing is working perfectly in Explorer but when opened in Firefox becomes unaligned and unusable. any help most appreciated many thanks I've noticed this for awhile now, and it's driving me nuts. I've been working on a layout ofor my online costuming portfolio, and recently I added a scrolling table to post any site updates I make. As soon as I put in the coding for the scrolling table with the updates, the whole page went crazy in Firefox. In IE, it looks fine. Here's the coding I used for the whole layout.. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Natalie's Cosplay</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
<h1></h1>
<div id="head-1" style="WIDTH: 401px; HEIGHT: 386px"></div>
<div id="nav">
<ul>
<li><a href="http://www.geocities.com/lnyworikkukenm//index.htm"><font size="1">HOME</font></a></li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/Aboutme.html">ABOUT ME</font></a></li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/completed.html">COMPLETED COSTUMES</font></a></li>
<li><a href="http://www.geocities.com/lnyworikkukenm/inprogress.html"><font color="#000000" size="1">IN</font><font color="#000000"
size=1>-PROGRESS COSTUMES</a></font> </li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/planned.html">PLANNED
COSTUMES</font></a></li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/links.html">RECOMMENDED
SITES</font></a></li>
<li class="last"><a href="MAILTO:Chinesefightinyo@aol.com"><font color="#000000" size="1">CONTACT ME</font></a></li>
</ul>
</div>
<div id="body-left">
<h2><font color="#000000"><em><font
color=#000000>G</font></em>al</font>lery</h2>
<div id="gallery">
<div class="gal" id="gzero"><a href="http://geocities.com/lnyworikkukenm/caterina.html"><img height="163" alt="Latest Costume: Caterina Sforza from Trinity Blood" src ="bigcat.jpg" width=221 ></a></div>
<div class="gal" id="gone"><img height="41" src="1cat.jpg" width =57 ></a></div>
<div class="gal" id="gtwo"><img height="41" src="2cat.jpg" width =57 ></a></div>
<div class="gal" id="gthree"><img height="41" src="3cat.jpg" width =57 ></a></div>
<div class="clear"></div>
</div>
<table width="133" border="0" cellspacing="0" cellpadding="3" align="center"><tr><td align="middle"><a href="http://www.website-hit-counters.com/" target="_blank"><img src="http://www.website-hit-counters.com/cgi-bin/image.pl?URL=8421-4416" alt="free website hit counters service" border="0" ></a></td></tr><tr><td align="middle"><font style="FONT-SIZE: 9px; COLOR: #24092c; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none">Get a <a href="http://www.website-hit-counters.com" target="_blank" style="FONT-SIZE: 9px; COLOR: #444444; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none" title="free website hit counter">free website hit counter</a> .</font></td></tr></table>
</div>
<div id="body-right">
<h2 align="left"><font
color=#000000>W</font>elcome!</h2>
<p align="center">
<br><font color="#000000" size="1">Please don't use
any of my photos without asking! If you have any questions or comments, please
send me an e-mail! <br>Thanks! ~Natalie</font></p>
<h2></h2>
<div style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 300px">
<table cellpadding="0" cellspacing="0" style="WIDTH: 350px">
<tr>
<td>
<font ><font size="1"><font
color=#000000>~<u>UPDATES UPDATES UPDATES</font>
</td>
</tr>
</table></font>
</div>
<div class="clear spacer"></div>
</div>
<div id="footer" align="center">
</div></a>
<div></div></div>
<p align="center">
c 2007 Natalie's Cosplay<br>
Template from <a href="freewebsitetemplates.com">Free Website Templates</a><br><br></p>
<div></div>
</body>
</html>
I am designing a header for my website and need to put text on both the left and right hand side of the topline for the website. When I try to put the code it overspills to next line so when I save it all the information I need on the same line goes over to the next line. How can I put the code in a different line in my coding but display it on the same line on a browser? Hi, I want to create a header (<h1>,<h2>,...) like on the picture (see attachment) with html and css. It is possible to create sth like that without using pictures? Thanks I was wondering on the board's opinion. Basically, the ALTtext element used in image display, provides two things: 1. Replacement text if the image should be abscent so that you can easily reference which image is missing and replace it. 2. Mouseover text of the image so surfers can get short extra information about the image. Now, you may argue that a Browser should come set as default to ignore mouseover text. However, there is a reason why many web developers still use this in preference to an image title. The reason being that it is extra programming for the developer to type out additional code which merely plays the same role as the original Alt attribute. Some argue that the programmer shouldn't even give an Alt value! Sadly, in turn many browsers are unfortunately becoming designed without the Alt text attribute, making many Alt-text-specific sites hard to understand. If you honestly find a small bit of mouseover text which really only exists for a fraction of a second intrusive of your surfing time then you've got issues. Who agrees? Hey i am just wondering why text size changes between browsers if you set it at a certain size. I set my text at 11px print, and the size from mozilla -> ie6 changes (gets bigger in ie6) but even greater difference in ie7... is there a way to make them all the same for sure without recoding for each browser? thanks in advance, -uberwalla Currently i have this bit of code on this site(www.rrelive.com/again/index.html) <form name="myform" onSubmit="location.href=document.myform.mytext.value"> <input type="text" name="mytext" onChange="location.href=document.myform.mytext.value"> <input type="button" onClick="location.href=document.myform.mytext.value" value="Go"> </form> But everytime i press enter it doesnt excecute the buttons code, so then it says the wrong thing in the URL Right now i want it to say"www.rrelive.com/again/hello" if i write hello in the box and hit enter. This works if i CLICK the button(Go). But not when i hit enter. When i hit enter it writes "www.rrelive.com/again/index.html?mytext=hello". 1000 Thanks in advance! Hello All, I cant seem to lock a form and images in a browser, I have all center and when it opens it remains centered but when I shrink the browser window the images/form moves... My CSS is <style type="text/css"> <!-- body { background-image: url(); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin: 0; padding: 0; } --> </style></head> <style type="text/css"> <!-- #centerDIV0 { width: 100%; text-align: justify; overflow: hidden; position: absolute; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; visibility: visible; background-image: url(CS_bkgd.jpg); background-repeat: repeat; } #centerDIVX { text-align: center; overflow: hidden; position: absolute; margin: 0px; padding: 0px; vertical-align: middle; z-index: 2; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; } #centerDIVZ { z-index: 2; overflow: hidden; position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; vertical-align: middle; left: 0px; top: 0px; right: 0px; bottom: 0px; margin-top: 380px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; visibility: visible; padding-top: 0px; padding-bottom: 0px; padding-left: -300px; } --> </style> And Html is... <body> <div id = "centerDIV0"> </div> <div id="centerDIVX"><img src="CS_bkgd.gif"/></div> <div id="centerDIVZ" bgproperties="fixed"> <form action="mailto:tastetation301@yahoo.com" method="post" enctype="text/plain" onsubmit="location.href='thanks.html'"> <p><br/> <strong>Name:</strong> <input type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> <br/> <strong>Email: </strong><input type="text"STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> </p> <input type="submit" value="Submit"/><input type="reset" value="Reset"> </form> </div> </body> </html> THANKS FOR YOUR ASSISTANCE!!!! I'm using tables and I have text inside one table. When I add line height to text so it looks good in IE6, Safari and Google Chrome, it looks wrong in FireFox and Opera. Every line is over each other. How could I fix this? Here is the code from start to end of the text part: Code: <html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image:url('tausta.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
line-height: 5%;
}
.style2 {color: #
color: #999999;
color: #999999;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; font-weight: bold; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="page">
<table id="Table_01" width="912" height="543" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="14" width="176" height="542" valign="top"><div align="right" class="style1">
<p class="style2"> </p>
<p class="style2"><strong><u>FILES:</u> </strong><u><br>
</u><br>
<br>
<br>
<br>
</p>
</div>
<p align="right" class="style5">Images: </p>
<p align="right" class="style4">images1 <br>
<br>
<br>
<br>
</p>
<p align="right" class="style5">Videos: </p>
<p align="right" class="style4">video1 </p>
<p align="right" class="style4">video2 </p>
<p align="right" class="style4">video3 </p>
<p align="right" class="style1"><span class="style2">1 - video4 </span></p></td>
Hello dear friends, i have an problem with text box read only. Using mobile with opera mini 8.65 or 4 and i have try bolt browser and ucweb6 mobile browser anyway i can not control the browsing of the text of my text box because the scrollbar does not work. If someone did know for wich reason ? If not possible to use the scrollbar with mobile browser could someone know how to add in the text box an button so we can browse the text by clicking up or down. I have many search in the internet the right text box with vertical scrollbar but all scrollbar could not be using by mobile browser. If you have a idea please give me your advice billion thanx by advance. Is it possible to have some error text appear if a user is browsing your website with a certain browser using html/css or maybe java? An example being: If - The website is being browsed using Safari Then - SHOW error text = "This link won't work with the Safari browser." Else - DO NOT SHOW error text is that sort of thing viable or just a pipe dream at current? Thanks in advance. Regards, Stoney I have 3 swf files (buttons that expand vertically when mouse overed) that i want them to overlap a picture. they are all placed in a table as seen in the pic, can this be done? Hi everyone, Sorry to ask questions, I'm sure it gets annoying to have newbies bug you. At this point, I just don't know where to look. I googled this issue and found this site, but the steps didn't do anything for me like it did the original posters problem. I started making a site from dreamweaver, which I did not much enjoy. I left and went back to my usual notepad/IE. I have it online now, and it looks ridiculous on Firefox. I've tried the css reset, which only messed it up even further. I've tried validator, which didn't really do anything but tell me about errors that I don't even understand. I'm getting so frustrated! What on Earth am I doing wrong? http://exit20.com/vguadiana/index.html Hello people. I am desiging a web framework and that requires me to create overlapping divs. They will be absolutely positioned and I am planning on using the DOM to allow the user to select which one to take precedence and create special effects with. Kind of like how the windows work in MS Windows with the frames overlapping each other Can someone kindly give me some CSS or JavaScript or any clues as to how I might do this? Thanks in advance and regards, mintsmike Hi guys, I am new in html. i have problem while creating a screen. when i scroll down my TD field completely overlap to TH field. I got one code from google. i goes well till my input field is text. but when i used select option in html, it ovelap to my TH. i send u my code to u. and same vbscript behind this code. Please correct me. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Freeze Foot</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2900.2180" name=GENERATOR> <link href="warehouse/external_css_file.css" rel="stylesheet" type="text/css"> <style> .select{ outline:groove; overflow:hidden; border-width: thin; border-color: #000000; } </style> </HEAD> <BODY><!-- CSS style to support freeze footer --> <form action="formout.php" method="post"> <H2 align=center> </H2> <STYLE type="text/css"> THEAD TH { BORDER-RIGHT: silver 1px thin; CURSOR: default; POSITION: relative; BACKGROUND-COLOR: silver; font-size:14px; } THEAD TH.locked { BORDER-RIGHT: silver 1px thin; CURSOR: default; POSITION: relative; BACKGROUND-COLOR: silver; font-size:14px; } THEAD TH { Z-INDEX: 20; ; TOP: expression(parentNode.parentNode.parentNode.parentNode.scrollTop-2) } THEAD TH.locked { Z-INDEX: 30 } TD.locked { Z-INDEX: 10; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff } TH.locked { Z-INDEX: 10; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff } TFOOT TR { Z-INDEX: 20; POSITION: relative; ; TOP: expression(parentNode.parentNode.parentNode.TopOfFooter) } .select { position:relative; z-index:-20;} </STYLE> </p> <DIV id=tbl-container align="center" style="BEHAVIOR: url('file:///D|/swapnilwork/freezeFoot.htc'); OVERFLOW:scroll; WIDTH:450px; SCROLLBAR-BASE-COLOR: #ffeaff; HEIGHT: 200px" > <table bgcolor=white align="center"> <thead> <tr> <th><div align="center">Item Name</div></th> <th><div align="center">Bags</div></th> <th><div align="center">Quantity</div></th> <th><div align="center">UOM Name</div></th> <th><div align="center">Shift</div></th> <th>Remarks</th> </tr> </thead> <tbody> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select" size="1" class="select" > </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select2" class="select" id="select2"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select3" class="select" id="select3"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select4" class="select" id="select4"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select5" size="1" class="select" id="select5"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select6" id="select6"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select7" id="select7"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select8" id="select8"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> </tbody> </table> </DIV> </form> </BODY> </HTML> Hi, if you take a look at the following page: http://www.vub.ac.be/ARCH/reis.php you will see that - in IE - the footer overlaps with the content layer. in FF everything is ok any ideas? thanks I wasn' too sure if I should post this here or not. If not, I'm really sorry. I'm working the home page and here is what I was trying to accomplish. Under the header and the menu, we would have a left section of about ~520px. It would be divided into 2 parts. Top and bottom section. Also, there would be a right column of say 250px The texts of the "content area" (left) and the "right column" are overlapping. I had forgotten a lot of the CSS and can't seem to fix this issue. I probably did some things with css that are not "proper" Anyway, here's a link to the page and to the CSS Link css Thanks in advance. |
|||||||