Learn VBA & Macros in 1 Week!

CSS - Left-hand Margin With Ul In Firefox

Full Excel VBA Course - Beginner to Expert

Left-hand Margin With Ul In Firefox	View Content

I've a menu bar that's a horizontally displayed list (i.e. set up with the following values:

ul{
margin-top:5px;
margin-bottom:5px;
margin-left:0px;
}
li.inline
{
display:inline;
padding-left:5px;
padding-right:5px;
border-left:1px solid #fff;
}

Contained in the following code:

<div id="mainNav">
<UL>
<li class="first"><a href="../about/index.html">About</a></li>
<li class="inline"><a href="../contact/index.html">Contact</a></li>
<li class="inline"><a href="../services/index.html">Services</a></li>
<li class="inline"><a href="index.html">Portfolio</a></li>
</UL>

On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element.

Is there a way to get both Firefox and IE to have no padding?

Thanks
</div>

Full Excel VBA Course - Beginner to Expert

Clearing A Float Left With A Margin-left

Similar Tutorials

View Content

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

Bizarre Right Hand Menu Cut Off, Appears On Left Side

Similar Tutorials

View Content

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}

#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

Problems Positioning Background Image Into The Top Left Hand Corner.

Similar Tutorials

View Content

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;

}

Borderless Images Showing A 1px Black Border On Top & Left Hand Sides

Similar Tutorials

View Content

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

Margin-left

Similar Tutorials

View Content

Thanks for taking the time to read my question.

I have a container that is floated left. I've put a margin-left: 80px; on it. the 80px seems to be quite a bit bigger in IE(6) than in FF. The page works well in FF but craps out in IE.

I can't figure out what's going on here. In my body{} I have margin: 0px; and padding: 0px;

Any ideas?

Brad

Margin/padding Vs. Top/left

Similar Tutorials

View Content

Hi,

I have this attributes left:504px; to align my picture but margin:0 0 0 387px; can be use as well. Whats the best thing to use?

Margin-left Not Aplied In Ie 6.0

Similar Tutorials

View Content

Greetings!
Please, take a look at http://147.32.113.143/biotest/Sourc...SectionId=10000.
Almost everything is ok, except one thing: in left menu (TOC), margin-left is not applied on <a> elements in <li> (menu items - red bordered) in IE 6.0. In FF, everything is OK, but what's much more interesting, in IE 5.5 it works too. So the only problematic browser stays IE 6.0.
Could anybody tell me please why this happens? So far, margin-rules worked well for me, even in IE.

P.S.: The discussed rule is in Web_Toc.css

Left Margin Won't Work

Similar Tutorials

View Content

Can't figure out why. I validated with W3 and everything was fine. I want p. leftmargin to be left indented 332px. Its just a single column site, should be easy......

This is the CSS

Code:

p. leftmargin {
margin-left: 332px;
}

#content {
text-align:left;
float:right;
width: 713px;
padding: 0px 17px 20px 30px;
background-color: #B11626;
height: 1100px;
}

this is the HTML

Code:

<div id='content'>

	<p class="leftmargin">
	<h2>
	COMING SOON
	</h2>
	</p>

</div>

page can also be found he

http://www.kdpatton.com/cosmopolis/program.htm

Problems In Ie6 With Margin-left

Similar Tutorials

View Content

Hey there
I have a small IE6 problem where my "boxR" margin-left positioned div is moving more away from left than expected but works perfectly fine in FF. 3px more to the left to be exact.

This is happening to my "boxL" div also (but only 1px more to the left than expected)

CSS:
Code:

.bigBox {background-color:#eeeeee; width:800px; clear:both;}

.leftCol {width:240px; float:left; position:relative; display:block; background-color:tan;}
.rightCol {width:560px; float:left; position:relative; display:block; background-color:lightBlue;}

.boxL {width:230px; margin-left:7px; margin-top:5px; position:relative; display:block;}
.boxR {width:550px; margin-left:3px; margin-top:5px; position:relative; display:block;}

HTML:
Code:

<table class="bigBox" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top">

<div class="leftCol">
<div class="boxL">Content Goes Here...</div>
</div>

<div class="rightCol">
<div class="boxR">Content Goes Here...</div>
</div>

</td></tr>
</table>

Pictures of problem:
FF:

IE6:

The 2 blue boxes are "boxL" and boxR"
The background color "Tan" and "lightBlue" is the "leftCol" and rightCol" divs

See how the "boxL" div has moved left 1px more and the boxR has moved 3px more to the left in IE6... how can i fix this?

Thanks heaps

Help With Negative Margin-left In Ie 7

Similar Tutorials

View Content

Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here
mactyler.com/NEWIDF/
Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7.
iphonedevforums.com/news/index.php
I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions.

Valid Css With Two Margin-left Tags/same Div

Similar Tutorials

View Content

The following script has been validated and is working fine (not in IE/Win):

body {
margin-top:5px;
margin-bottom:5px;
padding:0;
background:#ccffff;
}

a { text-decoration: none; }
a:link { color: #0000ff; }
a:visited { color: #33cc00; }
t{line-height:36px;}

#wrap {
width:613px;
left:50%;
margin-left:-336px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
}

#sidebar {
position:absolute;
float:left;
width:150px;
border: 1px solid #000033;
padding:15px;
background:#ffffff;
height:650px;
z-index:1;
}

#main {
float:right;
width:390px;
border: 1px solid #000033;
overflow: auto;
font-family: "Times New Roman", serif;
font-size:13px;
text-align:left;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
background:#ffffff;
background-repeat:no-repeat;
background-position:66% 540px;
background-image:url(smalljester.jpg);
height:750px;
overflow:auto;
z-index:2;
}

I'm still trying to figure out why it works. In particular, there are two margin-left tags in the #wrap div, one is -336 px and the other auto. I seem to remember this had to do with centering the layout (the negative margin) but how is it valid with two margin-left properties? TIA [I'd post the html from the dozen or so pages this is working on but there are too many urls.]

Positioning With Margin-left Ie Problem

Similar Tutorials

View Content

Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me...

I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem....

check it out..
http://centralfloridacomputerrepair.com/test.php

the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page.

the css is here
http://centralfloridacomputerrepair.com/style.css
(what you are looking at is div#sidetext)

and the css/xhtml validates
http://validator.w3.org/check?verbo...ir.com/test.php
http://jigsaw.w3.org/css-validator/...ir.com/test.php

I just can't figure it out...
I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either...
it gets to the right place horizontally.. but not vertically...

I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way.

any ideas?

edit: I've been here a whole year... and this is my first post. HA.

Left-margin Doubles In Ie6 - Baffled!

Similar Tutorials

View Content

You can view the site I'm working on here and the style sheet here . The #left and #right divs inside the container are set up so that a 15px margin should exist all the way around the outside as well as between the two divs. This is the white space that you can see.

From what I can tell, it displays correctly in Firefox, Opera and IE7, but not in IE6 or below. In IE6, which I test in using VirtualPC, the left-margin of the #left div seems to double and become 30px wide. This pushes the #right div all the way out to the edge of the container, though you can't see this happening because the background of #right is transparent.

I have spent the last hour looking at my css trying to figure out why IE6 is doubling the width of this margin, but I'm completely baffled. I'm convinced there's something obvious I'm missing because I'm a bit of a css amateur. Can anyone help?

Left Margin In Centered Page

Similar Tutorials

View Content

Hi guys. I am building a website where some pages are long (and the slidebar appears) and others are short (so the slidebar doesnt appear)

The problem is that the page is centered and when the slidebar appears, the page moves a bit to the left.

I could set the left-margin to X pixels but then it wont work as expected with different resolutions. Is there anyway to solve this problem?

Ie Adding Left Margin To Floated Div

Similar Tutorials

View Content

No worries, made an obvious error.
Please delete this =)

( sorry for waste of moderators time )

Input Field With Left Margin In Css Is Not Working?

Similar Tutorials

View Content

I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px.

This is my input field code on my form:
Code:

<input type="text" class="field" name="title" size="45" maxlength="200"/>

On my stylesheets I placed this:
Code:

input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}

Doesn't work??

I can't figure out why.

Popup Top And Left Margin With Respect To Current Li Position

Similar Tutorials

View Content

Hi to all

I am pasting here the code where i have problem

<!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>Untitled Document</title>
<style type="text/css">
.mainUL
{
float: left;
list-style: none;
line-height: 1;

font-weight: bold;
padding:0;

font-size:12px;
margin:0;
text-align:center;
vertical-align:middle;

border:2px solid #000000;
border-bottom:none;
/*border-left:none;*/
border-top:none;
/*margin-left:63px;*/
border:1px solid red;
width:294px;
height:150px;
margin-top:40px;
margin-left:300px;
}
.mailULLI
{
background:#FFFF99;
float: left;
width: 12em;
color:#000000;
padding:5px 0 5px 0;
border:2px solid #000000;
border-left:none;
border-bottom:none;
text-align:center;
margin:0;
border:1px solid blue;
height:15px;

}
.innerUL
{
width:100px;
height:30px;
border:1px solid red;
display:none;
margin-top:-52px;

}

</style>
<script language="javascript">
function showpopup(id)
{
var id=document.getElementById(id);
id.style.display='block';
}
function hidepopup(id)
{
var id=document.getElementById(id);
id.style.display='none';

}

</script>
</head>

<body>

<ul class="mainUL">
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a>
<ul id="popup" class="innerUL">

</ul>
</li>
</ul>

</body>
</html>

Currently when i mouseover the "click here 1" a popup open above it its fine

I want when i mouse over the "click here 2 " pop up should open above it

same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above

when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell

thanks in advance

Left Margin Pushes Everything Causing Horizontal Scroll

Similar Tutorials

View Content

Hello,

I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll.

I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail.

I am stuck. Any ideas on how to negate the pussing of a margin?

Popup Top And Left Margin With Respect To Current Li Position

Similar Tutorials

View Content

Hi to all

I am pasting here the code where i have problem

[ 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>Untitled Document</title>
<style type="text/css">
.mainUL
{
float: left;
list-style: none;
line-height: 1;

font-weight: bold;
padding:0;

font-size:12px;
margin:0;
text-align:center;
vertical-align:middle;

border:2px solid #000000;
border-bottom:none;
/*border-left:none;*/
border-top:none;
/*margin-left:63px;*/
border:1px solid red;
width:294px;
height:150px;
margin-top:40px;
margin-left:300px;
}
.mailULLI
{
background:#FFFF99;
float: left;
width: 12em;
color:#000000;
padding:5px 0 5px 0;
border:2px solid #000000;
border-left:none;
border-bottom:none;
text-align:center;
margin:0;
border:1px solid blue;
height:15px;

}
.innerUL
{
width:100px;
height:30px;
border:1px solid red;
display:none;
margin-top:-52px;

}

</style>
<script language="javascript">
function showpopup(id)
{
var id=document.getElementById(id);
id.style.display='block';
}
function hidepopup(id)
{
var id=document.getElementById(id);
id.style.display='none';

}

</script>
</head>

<body>

<ul class="mainUL">
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a>
<ul id="popup" class="innerUL">

</ul>
</li>
</ul>

</body>
</html>

[/code]
Currently when i mouseover the "click here 1" a popup open above it its fine

I want when i mouse over the "click here 2 " pop up should open above it

same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above

when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell

thanks in advance

Margin-right In Firefox

Similar Tutorials

View Content

Having a weird effect in firefox in that it doesn't seem to respect the right margin correctly.

What I am trying to do is line up text so that it flushes to an image that is to the right, but for some reason it pushes the image off the page.

(floatWrap is a clearing div so <br style="clear: both"> is not needed)

Code:

Code:

<div class="floatWrap">

 <div style="float: right;">
  <img src='imageSrc'>
 </div>

 <div id="txtWrap" style="float; left;">

  <div class="floatWrap">
  
   <div style="float; right;">
    Some text which should be right up on the picture and to the left of the title
   </div>

   <div style="float; left;">
    Title which will never reach the text next to the picture
   </div>

  </div>

  <div>
   Text that will reach the picture but for some reason pushes it out of the way instead of wrapping to the next line.
  </div>

 </div>

</div>

#txtWrap is the div that wraps the entire contents to the left of the image. I want this to flush all the way up to the image but give a buffer of 5px.

I tried setting #txtWrap {width: 100%; margin-right: 5px;} but it pushes the pic off the screen. I am assuming this b/c a scroll bar at the bottom of the browser appears

I tried setting #txtWrap {margin-right: 5px;} but the text within keeps pushing farther to the right than it's supposed to, causing the whole wrap to push the to the next line.

Where can I set the margin-right property so it displays correctly?