Learn VBA & Macros in 1 Week!

CSS - Css Drop Down Fine In Ie, Bad In Ns. Troubleshooting Needed

Full Excel VBA Course - Beginner to Expert

Css Drop Down Fine In Ie, Bad In Ns. Troubleshooting Needed	View Content

Ok, well I guess the real problem here is my lack of understanding on exactly how different browsers interpret CSS.

I found a tutorial about Swordfish CSS menus, seemed simple enough but when I tired to add some styling to it the whole thing became a huge mess.

It looks great in IE, but netscape totally ruins it. Makes me wanna just go back to using tables

http://dev.dreamhost.com/test.html

If someone can see an immediate problem here, or can suggest a better way of making cross browser pull-downs it would be greatly appreciated.

Basic premise:
Top of pull down will be a graphic
Pull down part will be html/css
Pull down part will have a margin of 4px, and the bg color will cover 100% so it looks like a regular roll over.

Full Excel VBA Course - Beginner to Expert

Help Needed With Form. Css Issue, Fine In Firefox But Not Safari And Google Chrome

Similar Tutorials

View Content

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >

<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>

<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>

<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>

<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}

/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}

Any help would be greatly appreciated.

Regards

Jay

Page Layout. Fine With Ie Not Fine With Firefox

Similar Tutorials

View Content

http://www.refinethetaste.com/step3.htm

Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help.....

s.o.s

Code:

style>
/*review order*/
#checkoutprocess	{ width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .th	{ float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .color	{ float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .noncolor	{ float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .intprice	{ font-weight:bold; }

#checkoutprocess .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

</style>

Works Fine With Firefox Not Fine With Ie

Similar Tutorials

View Content

I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/

Help Troubleshooting Some Css

Similar Tutorials

View Content

I am fairly new to .css but am trying to make my site 100% css formatted. One of my test pages is up at:

http://www.nikdaum.com/artnew/poems.htm

The issue lies in the grey navbar at the top. It's container's width is set to scale to 100% of the containing block, the white column, and inside this block is another block that is centered horizontally. Everythng works fine on Safari and Firefox on MAC, but in IE on PC the bar doesn't span the whole width and instead pushed to the left leaving a pretty wide gap on the right side. Any advice would be appreciated.

The .css file for the navbar is at
http://www.nikdaum.com/navbar.css

But the css for rest of the page is in the html file.

Thanks alot,
Nik

Bizarre Ie6 Bug; Css Troubleshooting Help!

Similar Tutorials

View Content

Here is my entire code causing this bug. I have simplified it considerably from the actual code where I am experiencing the 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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Lorem ipsum dolor sit amet & Lorem ipsum dolor sit amet</title>
	
	<style type="text/css" media="screen">
		
		div#page {
			position: relative;
		}
		
		div#branding-main {
			position: absolute;
			bottom: 14px;
			left: 9px;
		}
		
	</style>
	
</head>

<body>
	<div id="page">
			<div id="branding-main"><a href="#"><img src="https://secure.footprint.net/xscmsn/c/hotmail/hotmail77x19.gif" width="130" height="120" alt="" /></a></div>
		<div id="main">
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img width="276" height="110" src="http://www.google.com/intl/en_ALL/images/logo.gif" /></p>
				<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
				<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <img width="276" height="110" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" /></p>
				<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
				<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat. <img width="276" height="110" src="http://www.ctan.org/tex-archive/documentation/visualFAQ/source/lorem-ipsum-logo.png" /></p>
			</div>
		</div>
	</div>
</body>
</html>

Basically what you have there is a main wrapping DIV (div#page) set as relatively positioned, with a DIV inside it (div#branding-main) absolutely positioned near the bottom left of "div#page". It works fine in every browser and (usually) in IE6. The problem is that in 1/30 of page reloads in IE6 the absolutely positioned DIV will be assigned an incorrect value for the BOTTOM property, and will be rendered in the wrong spot on the page.

I can't seem to be able to tell what is causing this. It seems like removing one of the DIVs that the content is wrapped in stops it from happening...but I can't say for sure. Also, since this bug is time-dependant, I have added the superflous text and images to give the page a larger profile. The original page I was working on when I discovered this bug is much more graphically rich, and seems to invoke the bug more often than this dumbed down page.

I don't think this is directly related to hasLayout, as I am fairly certain I have exhausted that possibility by adding hasLayout to every relevant element. However, giving "div#page" a height larger than the height of the content (ie. an explicit height not dependant on the length of the content) seems to prevent the bug. Giving an explicit width to "div#page" doesn't make a difference.

Moving the "div#branding-main" to the bottom of the document seems to prevent the bug as well. However, I'm hoping there is a solution without changing the HTML in such a major way.

Please help!

Troubleshooting Span Tag

Similar Tutorials

View Content

I am creating a page where I will list OS names, and when I mouse over the name
I would like to display the versions in the database for the corresponding name.

The problem I am having is that I'm trying to use span to display the versions but I keep
getting a document.all.menu1.style is null or not an object.

Here is my code. I don't seewhere it's not working since I got this code from a tutorial and the
tutorial code works just fine.

<STYLE TYPE="text/css">
#menu1 { display : none }

A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</STYLE>

<td bgcolor="#DCEBEB">
<SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'">
<img src="../../images/plus.gif">AIX<br>
</SPAN>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">
<img src="../../images/minus.gif"><a href="http://www.test.com">Testing 1</a><br>
<img src="../../images/minus.gif"><a href="http://www.yahoo.com">Testing 2</a><br>
<img src="../../images/minus.gif"><a href="http://www.cnn.com">Testing 3</a>
</SPAN></td>

3 Column Layout Troubleshooting

Similar Tutorials

View Content

I have a three column layout currently. The left and right column contain borders to the central column where all of the website content is planned to be.

The problem that I have is that I do not want the left and right border columns to be in the windows scrollable area. For example, If someone views the site using an 1024x768 resolution, the page currently loads with a scroll bar at the bottom. To be able to see all of the central column, you have to scroll over slightly. If the right and left column were not in the scrollable area, the middle column would be 100% visible on load and also you would be able to see half of the right and left border.

Any help would be greatly appreciated.

I understand that what I am asking for is not that clear and any problems please say and I can draw a diagram.

Cheers

Show Selected Menu With Hierarchy On Each Page. Drop Down Menu Help Needed......

Similar Tutorials

View Content

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:

Code:


. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:


. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.

Code:


. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.

Code:


. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

This Did Look Fine

Similar Tutorials

View Content

I just uploaded this to my server, don't know what happend. It looked fine.

The original question I had was how to fix the "right bar" to line up vertically, correctly with the left menu and center text...(something to do with the positioning).

Either way, can someone help me out here...as you'll see I am not the best at CSS. Thanks.

Code:

<div style="position:absolute; left:207px; top:210px; width:427px; height:850px; z-index:3" id="center">
<div class="rightbar" style="position:absolute; left:649px; top:210px; width:140px; height:850px; z-index:4">

I Can't Believe I Am Going To Say This, But Looks Fine Now In Ie, But Not In Ff

Similar Tutorials

View Content

finally got everything lining up correctly in IE, but now the background color in not showing up in FF, but it does in IE

here is my code and the bit in bold is what has the problem with the background color in FF

also, is there a way to make the page end when the content ends?

/* CSS Document */
/* basic elements */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #545838;
background-color: #e9ebdc;
background-image: url(images/bg.jpg);
margin-top: 0px;
}
/* specific divs */

#page {
background-color: #fdfdfb;
width : 750px;
padding : 0;
margin : 0 auto;
text-align : left;
height : auto;
border-left : 1px solid #000000;
border-right : 1px solid #000000;
}

#headerimg {
background-image : url(images/callmefarms.jpg);
margin : 0 auto;
width : 750px;
height : 280px;
padding : 0;
}

#topbar {
background-image : url(images/header1.jpg);
margin : 0 auto;
width : 750px;
height : 85px;
padding : 0;
}
#content {
float : left;
width : 500px;
height : auto;
}

#sidebar {
float : left;
width : 243px;
height : auto;
}
#currentevents {
background: #fdfdfb url(images/currentevents.jpg) no-repeat top left;
margin-top: 0px;
width: 500px;
height: 75px;
}
#publications {
background: #fdfdfb url(images/publications.jpg) no-repeat top left;
margin-top: 0px;
width: 500px;
height: 100px;
}
#footer {
background: #a2a876 url(images/footer.jpg);
width : 750px;
padding : 0;
height: 75px;
}
#innercontent {
float : left;
width : 750px;
height : auto;
padding : 0;
}

#resources {
background: #e9ebdc url(images/resources.jpg) no-repeat top left;
width: 243px;
height: 60px;
text-align: center;
}

/* specific classes */

.clear {
clear:both;
font-size:0;
line-height:0px;
height:0;
}

Little Help With Ie Please.. Firefox Si Fine..

Similar Tutorials

View Content

First off, i'd like to say:

So here's the code i'm screwin' with:

ul.navlinks {
font-weight: bold;
background-color: #d7d7d7;
margin: -5px -10px 0px -10px;
padding: 0px 10px 1px 10px;
border-bottom: 1px solid #2169AD;
}

Looks great in firefox (color fills the whole div) but in IE (i'm using 6.0), there's about 20 pixes to the right that arn't colored.

Any suggestions?

Thanks

Ie Centers Fine, But Not Ff

Similar Tutorials

View Content

site
css

View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF.

How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?)

Thanks
Enjoy your weekends
Bryan

Stacking Ul's ... Fine In Ie6 & Ff2/3

Similar Tutorials

View Content

The code below works perfect in FF2/FF3 and IE6 ...

In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal)

If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically.

Code:

<title>Untitled Document</title>

<style type="text/css">
	body 
	{
	margin: 0 auto;
	padding: 0 auto;
	}
	#lottoNumbersWrapper
	{
		float: left; 
		width: 700px;
		height: 118px;
		background-image: url(images/structural/lottoNumbersBG2.jpg);
		background-repeat: no-repeat;
		border: 0px solid black;
	}

		.lottoNumbers
		{
			margin: 0;
			margin-right: 20px;
			margin-top: 10px;
			padding: 0;
			border: 0px solid black;
		}
			.lottoNumbers li {
				list-style: none;
				list-style-type: none;
				float: left;
				font-size: 13px;
				height: 40px;
				width: 45px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				margin-left: 0px;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				background-position: center;
				background-repeat: no-repeat;			
				border: 0px solid black;
				cursor: pointer;
			}
				.lottoNumbers li.white
				{
					background-image:url(images/whiteDot.gif);			
				}
				.lottoNumbers li.blue
				{
					background-image:url(images/BlueDot.gif);			
				}
			.lottoNumbers li span {
				display: block;
				margin-top: 12px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				color: #000;
			}
</style>
</head>

<body>
            <div id="lottoNumbersWrapper">
              
 
<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>
<br />

<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>            
            </div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>

Fine In Ie7 But Not Firefox

Similar Tutorials

View Content

i have a thick left hand border that does not show in firefox, the css is...

Code:

#container{
	margin: 0 auto;
  background-color:#ffffff;
  width:465px;
  border-left:335px solid #8FADB4;
  border-right:1px solid #8FADB4;
  border-top:1px solid #8FADB4;
  border-bottom:1px solid #8FADB4;
  background:  url('images/br_logo.jpg') no-repeat bottom right;

}

does anybody know why the left border does not show?

thanks

Page Looks Fine In Ff But Not In Ie

Similar Tutorials

View Content

See here

The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution.

Any tips ?

Div Being Shunted Down In Ie, Fine In Firefox.

Similar Tutorials

View Content

These are my three classes for the content section:

PHP Code:
#content {
margin-right:200px;
text-align:left;
background-color: #FFF;
border: 2px solid #E3EEF5;
}

#content_header {
background-image: url(images/layout/middlepanel/header_title_back.gif);
width: 100%;
height: 40px;
}

#content_inner {
padding: 10px;
color: #5A748C;
}

And here is my HTML:

PHP Code:
<div id="content">

                            <div id="content_header"><h1>Welcome to...... </h1></div>

                            <div id="content_inner">

                            <? include("includes/homepageloremipsum.php"); ?>

                            </div>

                        </div>

The trouble is that the 100% width on the content_header div for some reason shunts the div down by about 200px on IE. It sits at the top if I select 99% width or anything other than 100% width but then I have a gap on the right.

Ie Won't Render But Others Will Fine, Im Going Crazy

Similar Tutorials

View Content

Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE?

You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly

Site

Jumping Div Issue In Ff (ie Is Fine)

Similar Tutorials

View Content

Hi,

I have been battling with this issue for a while now and need the community's help here.
I am not the sole developer on this project and it's kind of difficult to work through other people's code - plus, I'm a developer, not a designer.

Anyow. Have a look at this page:

Article on Jakarta Globe Site

I implemented the drop down for the 'share article' feature. I'm using scriptaculous and costum-built JS to achive the effect. It's all good in IE - but you can see that in FF, the bread crumbs jump to the right when the drop down is activated. I have tried to implement a 'clearit' div like this:

CF Code:

Code:

<div class="article-body">
<div id="clearit"></div>

CSS:

Code:

#clearit {
display: block;
clear:both; }

With the effect, that in FF, the whole article jumps down a few pixels when the drop down is activated. (The bread crumbs don't jump to the right anymore.

I'm at loss now. Here's the CSS code for the relavant div's:

Code:

#article-heading {
 border-top:solid 4px black;
 background:url(../images/objects/module-head-bg.gif) repeat-x top; 	height:26px; }
.article-heading span {
 display:block;
 float:left;
 padding:5px 15px 5px 10px;
 height:16px; }
#slidedown_share {
	position:relative;
	width:123px;
	height:137px;
	background:#f4f2e6;
	border-left: solid #000 1px;
	border-right: solid #000 1px;
	border-bottom: solid #000 1px; 
	text-align:left;	
	left:510px;
}
.article-body {
	border-left:solid 1px black;
	border-right:solid 1px black;
	border-bottom:solid 1px black;
	background-color:white;
	padding:10px;
	margin-bottom:8px;
	font-size:11px;
}

Does anybody have an idea why this is happening and how I can avoid it?

Thank you for your help

Adrian

Div Causing Scrollbar In Ie, Fine In Ff

Similar Tutorials

View Content

100% height, floats, renders fine in FF but in IE I get a scrollbar and a bit of space underneath the wrapper div. I can put up a screenshot if needed. I've been trying to solve the issue for 2 days now. Thanks for the help.

CSS
Code:

@charset "utf-8";
/* CSS Document */
html, body {
	height: 100%;
}

body {
	background-color: #63aacf;
	margin-top: 0;
	margin-left: 0;
	padding: 0;
}

h1 {
	margin-top: 0;
	padding: 0;
}

#header {
	background-image: url(images/top.png);
	background-repeat: repeat-y;
	margin-bottom: 0;
}

#content {
	margin-top: 0;
}

#spacer {
	background-image: url(images/supra_02.png);
	background-repeat: no-repeat;
}

#wrapper {
	width: 800px;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(images/bg.png);
	background-repeat: repeat-y;
	overflow: hidden;
}

* html #wrapper {
	height: 100%;	
}

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

#mainContent {
	width: 600px;
	float: right;
}

#clearfloats {
	height: 0;
	clear: both;
	overflow: hidden;
}

HTML
Code:

<div id="wrapper">
	<div id="header">
    	<h1>boogy</h1>
        <div id="spacer">&nbsp;</div>
    </div>
    <div id="content">
    	<div id="sidebar">
        Link <br /> Link <br /> Link        </div>
        <div id="mainContent"> Hello World</div>
        <div id="clearfloats"></div>
    </div>
</div>

Looks Fine In Ie But Not In Firefox/netscape

Similar Tutorials

View Content

I have the following CSS:

#main_navmenu{
padding-top:10px;
width:120px;
height:80%;
float:left;
margin-left:7px;

font-size:11pt;
text-align:center;
padding-right:10px;

}

#main_navmenu a:link{
color:#777777;
width:100px;
background-color:#FDF4EE;
text-decoration:none;
font-weight:bold;
border:1px solid #663333;
margin-top:2px
}
#main_navmenu a:visited{
color:#777777;
width:100px;
background-color:#FDF4EE;
text-decoration:none;
font-weight:bold;
border:1px solid #663333;
}
#main_navmenu a:hover{
color:#000000;
width:100px;
background-color:#DDD4CE;
text-decoration:none;
font-weight:bold;
border:1px solid #663333;
}

why in IE do the link buttons look fine, with a width of 100px, and a nice gap between them. In FireFox, there is no gap between the buttons, and each button is only as wide as the text inside it.

Thanks in advance for any help