|
HTML - Unintentional Whitespace Around Divs
Hey guys,
I have wrote a scrolling news feed that pauses when you mouse over the scrolling elements inside. Here is a simple example of the problem that I'm having: Code: <html>
<head>
<script type='text/javascript'>
function check(id){
alert(id);
}
</script>
<style type='text/css'>
div{
position:relative;
}
</style>
</head>
<body>
<div id='master' style='border:1px solid black; width:60px;' onMouseOut='check(this.id)'>
<div id='div1' class='menuDiv'>Div1</div><div id='div2' class='menuDiv'>Div2</div>
</div>
</body>
</html>
When you roll your mouse in between the two divs inside the border, you get a onMouseOut event from the master holder div. Is there any way to jam both of those divs together so you don't get that event when you mouse over them?? Thanks for any help!!! Similar TutorialsHi, just starting out getting to know html, and I am trying to get around whitespace. I wish to create a tab (whitespace) and I cant seem to find the command/code for it. Is there a good page/site that can give me an overview and explanation of html code? thanks in advance Robenson There is whitespace that shows up at the bottom of my web page and I'm not sure how to get rid of it. This happens in Safari and FF, but not IE. See, I have a little menu at the bottom of the page where there's a top border and bottom border to it with a couple graphics I whipped up. Underneath the bottom border there becomes whitespace <> IE. There are no blank characters or carriage returns or anything in the code. Idk... frames and tables suck.... but i'm using them anyway. i want to show the menu that's on every page of the site in a frameset with another page. here's the frames page: http://lotpatrol.com/dictionary/index.php how do i get the white space to disappear from around menu.html? i've tried everything i could find on the interweb and still no luck. Hi everyone, I've got a div setup, used for navigation, like so: HTML Code: <div class="container"> <div class="item">Home</div> <div class="item">Link 1</div> <div class="item">Link 2</div> <div class="item">Link 3</div> <div class="item">Link 4</div> <div class="item">Link 5</div> <div class="item">Link 6</div> <div class="whitespace">Fill Whitespace</div> </div> The container div is 800px, but the links only come to 700px, roughly. I want to fill the remaining space, because each item has a border, other than the selected one, and i want the border to touch the side of the container. I've tried Code: .whitespace {
width: 100%
}
and this does work partially, but the div finishes just short of the edge of the container. I've entered text into the whitespace container, which has stretched it to the edge of the container, so i know theres nothing getting in the way. Any ideas how i can get the whitespace div to fill up the remaining space in the container div? Thanks Matthew Millar I'm not sure if this is the correct forum, so please direct me if I'm in the wrong place. I get the following error message when starting my website: Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later. -------------------------------------------------------------------------------- Whitespace is not allowed at this location. Error processing resource 'file:///C:/Users/aa/Documents/Visual Studio 20... for(loop = 0; loop < images_array.length; loop++) -----------------------^ Here's my code upto this function: <html> <head> <title>Company</title> <script language="javascript"> arImageList = new Array (); arSubImageList = new Array (); function preLoadCatImages(images_array) { for(loop = 0; loop < images_array.length; loop++) { arImageList[loop] = new Image(); arImageList[loop].src = images_array[loop]; } } I made a flash dropdown menu, but it's creating whitespace that i dont' want. How do I make it so that it just overlaps whatever is under it? Is there a way to eliminate whitespace between two elements. Here is a really simple example, where I want to eliminate the whitespace between two header elements. <h1> Hello, world </h1> <h2> yo, adrian! </h2> ...real estate is at a premium on the pages I'm working on, and I can't figure out how to get ride of this whitespace. I've tried css, where padding: 0px for the individual elements, as well as css for an encompassing div where padding: 0px but it doesn't work. Am I a nub or what!? Look at: http://realcrazyestate.com/ So in FF there always seems to be this little bit of white space below the flash video... and only in FF, I can't figure out why it is there... Any ideas, specifically on how to get rid of it? Thanks! I'm having difficulties with white space in <select> boxes. A simplified example is below; Code: <select> <option>testing (1-2-3)</option> </select> I would like this to appear with the full white space - but instead it trims to 'testing (1-2-3)' in the select box. Anyone any ideas how to make the select box render and return the option including the white space? I've created a sample website here and cannot figure out where the whitespace between images is coming from! It doesn't appear in Dreamweaver, but does in both Firefox and IE6. I've tried editing the border, padding and spacing properties of the table, rows and images to no avail. I've also tried to change these properties in CSS with no results. Any ideas? Josh Attention all HTML lovers, geeks and essentially anyone who can relieve me of my burden... for you will surely be blessed. Check out this site: equinat-usa.com For whatever the reason, and one clearly above and beyond my HTML ability to see... the page images should be at the very top on both sides. BUT NO!! There is a bit 'o white space at the top. What's up with that? At first, everything was fine... until one day the mysterious white space appeared. DTM *anxiously awaiting your reply* I'm running into IE 6 and 7 problems with the bug "Extra Whitespace in List Link Bug". I have applied the suggested Adobe fixes and some others found on-line but they don't seem to work. The problem is occurring in the two drop down menus in the top navigation. I also noticed some extra space at the top, above the content and the top of the browser window. These are only visible in IE 7 or lower. The site with the bug can be found at: http://www.infusiongraphics.com/UCOg...ite/index.html and css at http://www.infusiongraphics.com/UCOg...erontology.css What are your thoughts? Hello. I have problem with IE 6.0. 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=utf-8" />
<title>Untitled Document</title>
<!- Holly hack for 3 px -->
<!--[if IE]>
<style type="text/css">
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
<!--
#_left {
float: left;
width: 200px;
color: #900;
}
#_right {
float: right;
width: 200px;
color: #00F;
}
#_center {
float: left;
width: 200px;
color: #00F;
}
-->
</style>
</head>
<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_center">ddd</div>
</body>
</html>
The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
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="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{
font-family:Arial, Helvetica, sans-serif;
width:713px;
background:#cfeae7 url(bg.png);
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}
#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}
Any ideas? Help would be appreciated! Thanks. Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Hi Guys How do I make scrollable divs ? Like the ones in hotmail contacts when writing a new email. |
|||||||