CSS - Css Positioning.. Not Working Correct In Ie6. Works In Ff And Ie7

Website not showing how i want it to be on other PCs but when I open using my laptop everything appears fine. What is the problem?

I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted.

The double row drop down menu bar looks like this:
[menu1][menu2][menu3]
[menu4][menu5][menu6]
............................[menu6a]
............................[menu6b]

I have been working on this design for awhile after following a tutorial.

Design Web Page Working
CSS Field

I'm having 2 problems.

1. When I view this in Firefox 1.5.0.3 everything works out fine.
Firefox v1.5.0.3 Web Page Looks Fine

When I view this in IE 6.0.29 my content is near the bottom of the screen and not next to the left column and the footer is completely wrong.

Top view of IE 6

Bottom view of IE 6



2. Second Problem (happens in both browsers)

For my left column, how to I make it run all the way down to the footer properly. Write now I just have a bunch of "Enters" to stretch the ID to add the bg image tiled to the bottom?

Anyone know how to fix these?

Hello,

I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image.

The page where you can view this is:

WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page.

And I'll place the code in the next post,

Thank you for any ideas,

Jason

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

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>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

XHTML strict (no inline elements in <form)

Code:

<form ...>
<div>
<input ... />
<input ... />
</div>
</form>

Is the empty div element acceptable?

Thank you

<p>All-in-one solution for all your Web site needs <i>and</i> wants <ul>
<li>Subscriptions and Web alerts</li>
<li>Web site replication</li>
<li>Integrated Document Management</li>
<li>Next-generation HTML Form support</li></ul>


What the question is is if it is correct to mix text (inline) with a <ul> element (block-level).

Thank you

Is it correct to use &nbsp; in CSS??

thank you

Hi guys,

Is it correct to have a <div after a <form or after a <p ??

For example,
is this correct:

Code:

<form action="...


</form>

<div id="forgot_pass">
...
</div>

OR

Code:

<p id="...


</p>

<div id="forgot_pass">
...
</div>

Thank you

I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list.

The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong.

I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox.

The next problem was when I went to put the doc types in. I put
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
above the <html> tag. Once again it worked in IE but not Firefox.

I took out the doctype tag and inserted
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
inside the <head> tags. This seems to work in both IE and Firefox.

Is this an incorrect way to put a doc type in?
Below please see the css I am using and my header info

Code:

/*right hand nav bar*/
#nav ul{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 13px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#nav li{
	background: url(../images/divider_rht_nav.gif) repeat-x bottom;
	padding-top: 0.3em;
	padding-bottom: 0.6em;
	padding-left: 1 em; /*this is for IE*/
	padding-left: 10; /*this is for FireFox*/
}

#nav a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 13px;
	color: #325087;
}

#nav a:hover {
	color: #CC0000;
	line-height: 13px;
}

#nav li.selected {
	color: #174A4A;
	font-weight: bold;
	background-image: url(../images/divider_rht_nav_arrow.gif);
}

.heading {
	font-weight: bold;
	color: #174A4A;
	font-size:10px;
}

.headingspace {
	font-weight: bold;
	color: #174A4A;
	font-size:10px;
	margin-top: 1.5em;
}
/*end style*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>

Hi all,

There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me...

Thanks in advance,
Amanda

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>The Dachsund Rescue of Houston</title>

<style type="text/css">

body{
background: url(images/background.jpg) no-repeat top center;}

#contain{	
		width: 800px;
		height: 640px;
		margin-left: auto;
		margin-right: auto;
			}
#menu{		width: 466px;
		height: 98px;
		float: right;
		margin-top: 15px;
		}
#dog{		width: 491px;
		height: 257px;
		margin-top: 19px;
		margin-left: 22px;
		
float: left; }
		
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
		


#community{	float: right;
		background: url(images/community_spot.jpg) no-repeat;
		width: 231px;
		height: 259px;
		margin-top: 19px;
		margin-right: 22px;
		 }

#arrival{	
	clear: right;
	background: url(images/arrivals.png) no-repeat;
	width: 800px;
	height: 286px;
}

.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}

.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button"  title="About" border="0"/></a> 
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button"  title="Adopt" border="0"/></a> 

<a href="help.html"><img src="images/help_btn.png" alt="Help button"  title="Help DROH" border="0"/></a> 
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button"  title="Resources" border="0"/></a> 
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button"  title="Contact" border="0"/></a> 
</div>
<div id="dog">
<img src="images/jumping.jpg"  alt=""  title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of  'em - without having to keep 100 dogs at your house. MORE...</p></div>

<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p>  <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p> 

</div>
</div>
</body>
</html>

http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc

A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now.

Someone said something about problems with floats but i didnt quite udnerstand it

Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site.

Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl.

The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point?

I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code:
html Code:
Original - html 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> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>

  
<!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>
        <title>AdrienComix</title>
        <style type="text/css">

            #body{
            margin:0;
            }

            .header{
            margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
            }

            .box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}

            .left{
            width:15%;
            height:85%;
            float:left;
            }

            .content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}

            .comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}

            .emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
        </style>
    </head>
    <body id="body">
        <div class="header"><p>AdrienComix</p></div>
        <div class="content">
            <div class="emp">Happy New Year!</div>
            <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
            <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
            <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
        </div>
        <div class="left">
            <div class="box">
            <center><h3>Links</h3></center><br/>
            <a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
            <a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
            <a href="http://www.slackware.com">Slackware Linux</a><br/>
            <a href="http://www.gnu.org">GNU</a><br/>
            <a href="http://www.kernel.org">Linux Kernel</a><br/>
            <a href="http://www.google.com">Google</a>
            </div>
            <div class="box">
            <center><h3>Archive</h3></center><br/>
            <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
            </div>
        </div>
    </body>
</html>

Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible?