Learn VBA & Macros in 1 Week!

CSS - Menu Fine In Ie, Breaks In Ff & Chrome

Full Excel VBA Course - Beginner to Expert

Menu Fine In Ie, Breaks In Ff & Chrome	View Content

I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom

Full Excel VBA Course - Beginner to Expert

Site Fine In Ie6/7 - Breaks In Ff?

Similar Tutorials

View Content

Hi everyone,

I am stumped at why I'm having this problem in FF only but I'd appreciate any input as to why it's happening.

Take a look at www.spotabusiness.com in FF and see how there is a huge whitespace above the content regardless of what links you click.

It looks fine in IE6 and 7.

Thanks

Ie Breaks Page, That Is Fine In Mozilla

Similar Tutorials

View Content

Css Doesn't Work In Ie, Works Fine In Ff And Chrome

Similar Tutorials

View Content

My web page looks fine on FF and Chrome, but doesn't on IE. Everything is pushed up. Anyone have any suggestions? I have searched the net and can't find a solution.

egoboosters . org / newindex1 . htm

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 Wont Display Correctly In Ie7 Or Older. But Works Fine In Chrome, Safari, Ie8, F

Similar Tutorials

View Content

Css Drop-down Menu Breaks In Ie7

Similar Tutorials

View Content

Can anyone give me a hint as to why the CSS drop-down menu on this page breaks in IE7: http://www.mediamogulsweb.com/

I've looked at it for while and I'm not getting anywhere. Thanks.

Asp.net Breaks My Drop Down Menu Css

Similar Tutorials

View Content

Hi,

This is the page i constructed using CSS.
http://81.137.250.65/champs/main.html

As you can see at the top of the page, when you hover links eg "about" , "booking" a drop down menu appears.
This drop down menu calls a Javascript file which is using a stylesheet. "Style.css" for the formatting of the drop down menu.

My colleague gave me some ASP.net code for the login form, as in the sample URL above the login form is not functional.
As soon as i enter the asp.net code, all the formatting for the Drop Down menu breaks completely. The positioning, coloring etc is all lost. The menu appears at the bottom of the page, and the hyperlinks are all displayed as tradional blue underlined links.
The page itself still appears fine, and doesnt seem to break.
So the asp.net code is not affecting the css in the page itself, but the drop down menu

I dont know if this is a asp.net problem or a CSS problem. My guess is that its the way the CSS for the drop down menu i setup?

Ive only been doing CSS for about 6 weeks, so you will notice the code is not the neatest. I am open to constructive criticism.

If anyone can help with this issue, i would appreciate it.

Thank you

eemo

Window Resize Breaks Vertical Menu

Similar Tutorials

View Content

I know this is an easy fix, I just don't know it. Basically I have a vertically that spans the top of my page, but if the window is too small or resized too small, the menu is broken into two parts, the part that doesn't fit the menu forms a new line. How can this be fixed? Much thanks!

Here's the site with the issue: http://www.entertainmentengineering.com/v6.issue1/
Reply With Quote

Firefox Issue With Menu, Ie Working Fine

Similar Tutorials

View Content

Here is the issue in firefox:

It's displaying the divider 1 pixel down?

It displays inline with IE.

The code is:

#navigation {
height:37px;
background: url(/img/menu_bg.jpg) repeat-x;
}

#navigation ul{
list-style:none;
}

#navigation ul li{
display: block;
float: left;
width:83px; /* 751 divided by number of items (9) */
text-align:center;
background: url(/img/divider.jpg) right no-repeat;
line-height:37px;
}

#navigation ul li.last{
background: none;
}

#navigation a:link,#navigation a:visited {
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}

#navigation a:hover {
color:#ff9f47;
}

Help appreciated.

Css Sub-menu Breaks In Ie, Worked Before, White Space/gaps In Ie, Need Help!

Similar Tutorials

View Content

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/

Css/js Nav Breaks On Mac -- Please Help!

Similar Tutorials

View Content

I've been working on putting a css/js text navigation together which thus far has seemed to work as intended on a PC. This morning when I checked it on a mac, it broke down.

Technically it breaks down gracefully I suppose... All links are present and the nav is displayed fully expanded. The problem is that this nav is going to have hundreds of links, and having it fully expanded just isn't practical.

If anyone could take a minute to look at my css & js to see if there's something simple that I'm missing, it'd be great.

You can look at my example page he
http://www.whitesagemedia.com/cssnav.html

All css & js is included in the ssource - no attachements.

Thank you, thank you, thank you, to anyone who can help me out.

-Chet

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;
}

Page Breaks...

Similar Tutorials

View Content

Ok people, I have a page that contains 2 tables, one beneath the other...

The table at the top can vary in height, but the table at the bottom is of fixed height...

What I want to do is put some sort of "page break" in, so that the second table is always printed on a second piece of paper...

Any ideas anyone?

Page Breaks And Mac Osx

Similar Tutorials

View Content

Hi:

I have a MySQL/PHP generated form letter which gets printed and mailed.

I have extablished a CSS font (class?) with a "page-break after" parameter as shown he
PHP Code:
h4 { font-family: Arial, Sans-serif; font-size: 14px; font-weight: 500;
text-align: left; page-break-after: always;}

This works great on a PC running IE. However, On a Mac, running OSX, the page breaks are entirely ignored and it is printed as a single long page.

I have tried using other Browsers (Opera, Netscape, and Safari) and they all heve the same problem.

Does anyone have a suggestion?

Thanks

Sean

Line Breaks And Div's

Similar Tutorials

View Content

There must be a better way to accomplish this... I need a line break between the two headers in the page below. As it stands it works in Firefox and IE with <br> tags but this seems sloppy.....Is this what the clear element is for?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
* {
 margin: 0;
 padding: 0;
 }

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

#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 1px solid #808080;
background-color:#ffffff;
} 

#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}

#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}

#01 {
position:relative;
} 
#02 {
position:relative;
margin-top:100px;
}

#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080; 
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}

</style>
<body>
<div id="wrapper">
	<div id="sidebar"></div>
	<div id="content">
		<div id="01">Header 1</div>
		<div id="b1w"></div>
		<div id="b2w"></div>
		<div id="b3w"></div>
		<br><br><br>
		<div id="02">Header 2</div>
	</div>
</div>
</body>
</html>

Css Line Breaks?

Similar Tutorials

View Content

Hey there. Is it possible to add a line break so that the following markup...

html Code:
Original - html Code <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl>

  

<dl>
<dt>Posts:</dt>
<dd>33</dd>
<dt>Topics:</dt>
<dd>4</dd>
</dl>

...looks like this?

Posts: 33
Topics: 4

Basically, I want it to be like display: block, but only to the RIGHT of the text. Does that make sense? Just like adding a <br />, but with different HTML.

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>