CSS - Horizontal Line Problems Between Browsers

For some reason, I can't get this to look right in both Firefox and Explorer; I haven't even bothered trying this on Macs, Safari, etc.!

The relevant HTML:

Code:

<div id="wrapper">
<div id="header"></div>
<div id="navbar">
        <p>
        <a id="selected" href="index.php#content">Home</a>
	    <a href="about.php#content">About</a>
		<a href="screenings.php#content">Screenings</a>
		<a href="trailer.php#content">Trailer</a>
        <a href="gallery.php#content">Gallery</a>
        <a href="comeplay.php#content">Come Play!</a>
        </p>
</div>
<div id="main">
</div>
</div>

The relevant CSS:

#header
  {
  margin: 0 auto;
  text-align: center;
  width: 830px;
  height: 534px;
  background: #fff url(images/logo.jpg) top center no-repeat;
  border: 0;
  padding: 0;
  margin-bottom: 0;
  }

#navbar
  {
  background: url(images/horizontal_divider.jpg) #fff;
  width: 830px;
  height: 40px;
  padding: 0;
  margin: 0 auto;
  margin-top: -10px;
  vertical-align: bottom;
  }

#navbar p
  {
  position: relative;
  bottom: -18px;
  left: 50px;
  margin: 0;
  padding: 0;
  }

#navbar #selected
  {
  background: #FFF;
  font-weight: bold;
  border-width: 1px 1px 1px 1px;
  border-top-color: #000;
  border-right-color: #000;
  border-left-color: #000;
  border-bottom-color: #fff;
  color: #000;
  }

#navbar a
  {
  text-decoration: none;
  color: #333366;
  border: solid;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-color: #666699;
  border-right-color: #666699;
  border-left-color: #666699;
  border-bottom-color: #000;
  margin: 0 -4px 0 0;
  padding: 3px 6px 0 6px;
  background: #CCF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  }

If you want to see the URL, please IM me (new users are not allowed to post them, it seems).

For some reason, Firefox always outputs the navbar <p> one pixel lower than Explorer, which screws up the effect I'm going for.

Also, for some reason, while Firefox does the borders just fine, Explorer doesn't render the border-top of the navbar when it's only 1 pixel wide (if I make it 2 pixels wide, only THEN will Explorer it [at 1 pixel wide, not 2]). Unfortunately, 2 pixels makes is look really ugly in Firefox. What's up with this?

Any help would be much appreciated, as this has been driving me nuts! Gracias!

Alright, for some reason, my site works fine in IE, but displays wierdly in Firefox and Opera.

http://www.gamingfanboy.com

Is there anything in my code that could be causing the display problems in Firefox/Opera?

Edit: Just in case you were wondering, no, those aren't the final colors. I was just looking for some contrast.

I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect).

I've got two problems in IE that can be viewed he
http://www.windrivers-gsp.com/test/index.php

CSS:
Code:

@charset "utf-8";
/* CSS Document */

/* Document Formatting */
html {	width:100%;}

body, tr, th, td, p {	font-family:Verdana, Arial, Helvetica, sans-serif;
						font-size:1em;
						color:#000000;
						margin:0px;
						padding:0px;
						}

#navigation	{	position:relative;
				background:url(design/menubar.gif) #009933;
				background-repeat:repeat-x;
				width:100%;
				height:30px;
				text-align:center;
				display:block;
				}

#nav2	{	position:absolute;
			left:50%;
			width:628px;
			margin-left:-314px;
			}

#container	{	position:relative;
				max-width:1400px;
				min-height:400px;
				overflow:visible;
				margin-left:auto;
				margin-right:auto;
				border-bottom:1px solid #666666;
				padding:15px 10px 10px 10px;
				z-index:2;
				}

#content	{	font-size: 1em;
				margin-right:36%;
				overflow: visible;
				background: #FFF;
				text-align: left;
				height: auto;
				padding-right:10px;
				}

#rightpane	{	font-size: 1em;
				float:right;
				margin-top:0;
				width:35%;
				overflow: visible;
				text-align: left;
				height: auto;
				}

#fixcont	{width:100%;float:left}

/* PIE/Aslett Clear Fix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
			
/* New Navigation Menu Styling */

#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}

#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}

#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}

#menu h2:hover {background-position: 0 30px;}

#menu a {color: #000; text-decoration: none;}

#menu ul ul a {font-size:.8em; background-color:#a4906d;}

#menu ul ul a:hover {background-color:#CCCCCC;}

#menu ul li {position: relative;}

#menu ul ul {position: absolute; z-index: 10;}

div#menu ul ul {display: none;}

div#menu ul li:hover ul {display: block;}

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
        <style type="text/css" media="all">
        body { behavior: url(csshover.htc); font-size: 100%;} 
        #menu ul li {float: left; width: 100%;}
        #menu ul li a {height: 30px;} 
        #menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;} 
        </style>
<![endif]-->
	<meta http-equiv="Content-Language" content="en-us" />
    <meta name="title" content="Test Menu" />
    <meta name="Publication_Date" content="09/07" />
    <meta name="robots" content="ALL" />
    <meta name="revisit-after" content="2 weeks" />

    </head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
  <li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
  <li><h2><a href="index.php">Page Two</a></h2>
    <ul>

      <li><a href="index.php">Page 2.1</a></li>
      <li><a href="index.php">Page 2.2</a></li>
      <li><a href="index.php">Page 2.3</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><h2><a href="index.php">Page Three</a></h2></li>

</ul>
<ul>
  <li><h2><a href="index.php">Page Four</a></h2>
    <ul>
      <li><a href="index.php">Link 1</a></li>
      <li><a href="index.php">Link 2</a></li>
      <li><a href="index.php">Link 3</a></li>
    </ul>

  </li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; 
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; 
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>

Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right.

In FF everything looks good, of course. Any ideas?

Hi all,

I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7.

The li tag css is

Code:

li{
 	background:url('../images/li_bg.gif') repeat-x #ff0000;
 	display:inline;
 	padding:0 5px 0 5px;
 	margin:0 2px 0 0;
 }

List html is:

Code:

<ul>
	<li><a href="member.php">Home</a></li>
	<li><a href="profile.php">Profile</a></li>
	<li><a href="help.php">Help</a></li>
	<li><a href="logout.php">Logout</a></li>
</ul>

I reset margin and padding for all other tags in a general css file.

The image is a 1px width gradient.

Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin.

Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space.

Have seen plenty of navbar tutorials but not with margin between list elements.

Any help is much appreciated...

Hi Folks,

I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue...

example

I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column.

I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this.

the CSS is he
styles.css

Any help/suggestions or comments would be appreciated more than I can describe!!

Thanks in advance!!

Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors.

A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid.

Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures.

Here's the HTML involved:
Code:

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
  
  </div>

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
  
  </div>

<div class="node">

      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
  
  </div>

And the CSS as well....
Code:

.node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
 
}
 
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
 
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0; 

I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??).

Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well.....

Hi Everyone,

I'm new to the forum and somewhat new to CSS.

I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar.

Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left.

Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all.

Here is the problem code:
Code:

<div id="navbox">
	<ul id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
    <li><a href="formapp.html">APPLY NOW</a></li>
    <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
   </ul>
  </div>

And the corresponding CSS:
Code:

#navbox {
	background-color: #B1C5D0;
	height: 50px;
	width: 760px;
	overflow: visible;
	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-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	color: #036;
	font-weight: bold;
	font-size: 130%;
	font-family: "Courier New", Courier, monospace;
	line-height: normal;
}
#navbar li {
	display: inline;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

I know it's not much.. but it's making me crazy.
I have tried zeroing out all padding / margins to no avail...

Any help would be greatly appreciated!!
Thanks in advance!
Celeste

Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>.

As you can see from he

http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/

.. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>.

The xhtml is empty of styles, and the only styles applied to these elements a

Code:

#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}

#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.7em;
list-style-type: square;
}

#main_content li {
line-height: 15px;
}

In Firefox the line heights are consistant, am I missing something?

Thanks

I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up.

The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it.

I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks!

Forums: Click Here

Stylesheet: Click Here

Pictures of my problems:
Text problem-


Line Problem -

Greetings,

I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help!

li
{
list-style-type: none;
background: url(../images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}

I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!

Greetings,

I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.

All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.

Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?

Thanks in advance!

Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink)

Thanks for your help

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

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

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}