Databases
StackOverflow2013
Postsdbo
POIE 7 is Turning My Horizontal Nav Bar into a Double Line
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE 7 is Turning My Horizontal Nav Bar into a Double Line
    text
    copied!<p>I am working on my site in Firefox 3.0.9 (and am very green with CSS) and it looks fair so far. However I have a floating horizontal nav bar at the top that looks like is stepping down. Here is what I attempted so far:</p> <p>1) I have adjusted the margins, zeroed the padding and changed the width of the background image - all to no effect. </p> <p>2) I tried to create a IE7 folder and point the browser their with a different stylesheet - no effect. </p> <p>3) I tried to use IE7.js to solve the issue - no effect. </p> <p>IE is driving me batty! Any thoughts? Here is my CSS &amp; HTML (no laughing ;-) )</p> <p>Thanks!</p> <p>/<em>---my css---</em>/</p> <pre><code>#body { margin: 0px 0px 20px 0px; text-align: center; background: #450000 url(images/greenstrip.jpg) repeat-x right top; } #maincontainer { width: 720px; border-width: 8px; border-color: #fff; border-style: solid; position: absolute; margin-left: 50%; left: -360px; margin-right: auto; } #box p { position: absolute; color: #fffceb; width: 450px; margin-top: 275px; margin-left: 16px; background: #373635; font-size: medium; font-family: "arial rounded mt bold", "times roman"; text-align: left; line-height: 1.5em; padding-left:7px; padding-right:7px; padding-bottom:7px; border-style:solid; border-color:#bec783; border-width: 3px; } #lowerbox p { position: absolute; color: #fffceb; width: 450px; background: #373635; font-size: medium; font-family: "arial rounded mt bold", "times roman"; text-align: center; line-height: 1.5em; padding-left:7px; padding-right:7px; padding-bottom:7px; border-style:solid; border-color:#bec783; border-width: 3px; width: 450px; margin-top: 433px; margin-left: 16px; } #featured p { position: absolute; color: #000; width: 270px; margin-top: 825px; margin-left: 128px; background: none; font-size: small; font-family: "arial rounded mt bold", "times roman"; text-align: center; line-height: 1.5em; } #customize p { position: absolute; color: #000; width: 270px; margin-top: 825px; margin-left: 420px; background: none; font-size: small; font-family: "arial rounded mt bold", "times roman"; text-align: center; line-height: 1.5em; } .name { font-weight: bold; font-style: italic; color: #bec783; } ul { margin: 0px; width: 680px; line-height: 0em; list-style: none; font-size: medium; font-family: "arial rounded mt bold", "times roman"; float: left; background: url(images/button.gif); } ul a { display: block; padding: 0 1.2em; line-height: 2.2em; text-decoration: none; color: #fff; float: left; margin-left: 6px; margin-right: 0; } ul li { float: left; width: auto; } ul a:hover { color:#f26214; } ul a:visited { text-decoration: none; } #textpad ul { position:absolute; width:100px; margin-top: 335px; margin-left: 481px; background: none; text-decoration: none; } .promise a { display: block; color:#000; line-height: 1em; font-size: 30px; font-family: "freestyle script"; width:150px; } .promise a:visited { text-decoration: none; } #fet a:link, #fet a:visited { text-decoration:none; color: #000; } #fet a:hover { color:#f26214; } &lt;!---HTML---&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Core 4 Innovative: Website Solutions For Your Small Business&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;meta name="keywords" content=" core 4,web,webpage developer,design,web designer, freelance,low cost" /&gt; &lt;meta name="robots" content="index,follow" /&gt; &lt;!--[if lt IE 7]&gt; &lt;script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt; &lt;/head&gt; &lt;body id="body"&gt; &lt;div id="maincontainer"&gt; &lt;table id="Table_01" width="720" height="961" border="0" cellpadding="0" cellspacing="0"&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="http://www.core4innovative.com/home.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.core4innovative.com/about/about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.core4innovative.com/process/our_process.html"&gt;Our Process&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.core4innovative.com/services/services.html"&gt;Our Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.core4innovative.com/contact/contactus.aspx"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="textpad"&gt; &lt;ul&gt; &lt;li class="promise"&gt;&lt;a href="#"&gt;Affordable Web Hosting Starting at $9.99 per month!&lt;a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="box"&gt; &lt;p&gt;&lt;span class="name"&gt;Core 4 Innovative&lt;/span&gt; puts your online success within reach. Using our affordable website solutions, unique development process and standardized methods for design you can be sure to recieve a customized product that adds value to your business!&lt;/p&gt; &lt;/div&gt; &lt;div id="lowerbox"&gt; &lt;p&gt;&lt;span class="name"&gt;We Serve Every Major Industry:&lt;/span&gt;&lt;/br&gt; Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services&lt;/p&gt; &lt;/div&gt; &lt;div id="featured"&gt; &lt;p&gt;&lt;span id="fet"&gt;&lt;a href="http://www.core4innovative.com/portfolio/portfolio.html" alt="our featured client"&gt;Our Featured Client&lt;/a&gt;&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;div id="customize"&gt; &lt;p&gt;Customize Your website&lt;/p&gt; &lt;/div&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;img src="images/top.jpg" width="720" height="12" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;img src="images/logo.jpg" width="258" height="137" alt=""&gt;&lt;/td&gt; &lt;td colspan="2"&gt; &lt;img src="images/apple_graphic.jpg" width="462" height="137" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;img src="images/topdivider.jpg" width="720" height="48" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;img src="images/topdivider-06.jpg" width="502" height="3" alt=""&gt;&lt;/td&gt; &lt;td rowspan="2"&gt; &lt;img src="images/notepad.jpg" width="218" height="305" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;img src="images/getaquotebox.jpg" width="502" height="302" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;img src="images/roundboxes.jpg" width="720" height="370" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;img src="images/footer.jpg" width="720" height="88" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;img src="images/spacer.gif" width="258" height="1" alt=""&gt;&lt;/td&gt; &lt;td&gt; &lt;img src="images/spacer.gif" width="244" height="1" alt=""&gt;&lt;/td&gt; &lt;td&gt; &lt;img src="images/spacer.gif" width="218" height="1" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload