CSS - Anchor Ignoring Width Declaration In Mozilla?!

For the life of me, I can't figure out what is causing this problem.

One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain.

I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines.

If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something...

Hello.

I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however.

Anyway, on to the issue I'm having.

I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE.

The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either.

Here's the style definition:

Code:

.newsTypeSection{
	width:48%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	display: inline;
}

the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it.

Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE.

URL

The bottom is what shows up in IE8, and probably other version of IE as well.

Can anyone help me with this? It's beyond frustrating.
Please let me know if you need more information. I can't link to the page because it's not public at the moment.

Hi,

I made an html document, and a css file, works allright, but when i delete the doctype declaration, it's not working correctly anymore -> the body width is gone, and my content is stretched, losing my left and right margins.

Code:

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666666;
	width: 710px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.9em;
	margin-bottom: 3em;

The problem is, that i will use this css file for an xml file, transformed by xslt, and the resulting html file doesn't have a doctype specification, that means i can't seem to add a doc spec and still keep my xslt file valid.

any suggestions to solve this problem..?

thanks a lot,

jarra

this never happens in IE, only FF

sometimes when i visit my site the letter links in the menu are messed up. like the padding is ignored on only 1 of the letters when they ALL use the exact same code.

heres what i'm talking about:

what it should look like:



what it sometimes looks like:



as you can see, the padding on 1 letter is ignored. sometimes this alternates between different letters, but its always only 1 letter that this happens to.

here is my css code:

Code:

#menubarbg {
  background: url(images/menu_bar_bg.gif) repeat-x;
}

#menuletter a {
  background: url(images/menu_letter_bg_noh.gif) repeat-x;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  line-height: 20px;
  cursor: pointer;
}

#menuletter a div {
  background: url(images/menu_letter_l_noh.gif) left top no-repeat;
}

#menuletter a div div {
  background: url(images/menu_letter_r_noh.gif) right top no-repeat;
  padding: 0px 6px 0px 6px;
  height: 20px;
}

#menuletter a:hover {
  background: url(images/menu_letter_bg_h.gif) repeat-x;
  color: #000000;
}

#menuletter a:hover div {
  background: url(images/menu_letter_l_h.gif) left top no-repeat;
}

#menuletter a:hover div div {
  background: url(images/menu_letter_r_h.gif) right top no-repeat;
}

here is the html code:

Code:

  <table cellpadding="0" cellspacing="0" border="0">
  <tr>

  <td id="menuletter"><a href="guitar-tabs/1.html"><div><div>#</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/a.html"><div><div>A</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/b.html"><div><div>B</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/c.html"><div><div>C</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/d.html"><div><div>D</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/e.html"><div><div>E</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/f.html"><div><div>F</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/g.html"><div><div>G</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/h.html"><div><div>H</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/i.html"><div><div>I</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/j.html"><div><div>J</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/k.html"><div><div>K</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/l.html"><div><div>L</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/m.html"><div><div>M</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/n.html"><div><div>N</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/o.html"><div><div>O</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/p.html"><div><div>P</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/q.html"><div><div>Q</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/r.html"><div><div>R</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/s.html"><div><div>S</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/t.html"><div><div>T</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/u.html"><div><div>U</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/v.html"><div><div>V</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/w.html"><div><div>W</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/x.html"><div><div>X</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/y.html"><div><div>Y</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/z.html"><div><div>Z</div></div></a></td>
  
  </tr>
  </table>

the reason it uses a table is so it displays properly on all browsers.

help....

Hello All!

I started making a website and I have run into a problem with some code.

I am trying to put the paypal donation code on my site with an image, unfortunately the paypal code is ignoring the css and the image is not displaying with a border around it. :P

My site: www.looniefrugal.com
The image is on the far right column under the RSS image. Note how the RSS has a border and the Coffee image does not.

Here is the code for that column

Code:

<div id="tertCol"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
	<?php endif; ?>
	<div id="elseWhere">
		<h3>Before you go</h3>
		<p>I dare you to... </p>
		<ul id="imgLinks">
			<li><a href="http://feeds2.feedburner.com/LoonieFrugal" title="Subscribe to LoonieFrugal.com"><img src="<?php bloginfo('template_directory'); ?>/images/guide/rss.gif" alt="Subscribe - RSS" /></a></li>

<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="elina_1985@hotmail.com">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="item_name" value="Loonie Frugal">
<input type="hidden" name="item_number" value="Coffee">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="bn" value="PP-DonationsBF:coffee.gif:NonHosted">
<input type="image"  src="<?php bloginfo('template_directory'); ?>/images/guide/coffee.gif" name="submit" alt="Coffee Time!">
</form>		
</li>

	
	</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->

And here is the Style code

Code:

ul#imgLinks{list-style:none;margin:7px 0;}
#imgLinks li{color:#7F7F7F;line-height:1.2em;padding:0 0 1px;}
#imgLinks li a img{border:3px solid #EEE;width:208px;height:69px;color:#333;font-weight:bold;}
#imgLinks li a:hover img{border-color:#DDD;}

Thanks for any help with this. I am new to code :P

I'm fairly new at CSS, but I am stumped with an issue I am having getting my H1 and H2 tags to show a color.

Now the problem. I have styled the Header tags in my CSS for a <div> tag that will contain the text on my page. They are to have the color of my navigation bar on the left of the page (value #cc0000). The nav bar is styled with a CSS created by a spry in Dreamweaver CS3. My text is styled by a separate CSS document (con-ed.css) which is found in a different directory.

I created all of the style elements for my <h1> and <h2> tags and they look fine in Dreamweaver. But when I open the page in a Web browser such as Firefox, Safari, or Internet Explorer, all of the formatting of the tags displays EXCEPT the color value I mentioned above. I am guessing that I have a cascading issue going on, but I haven't been able to figure out where it would be. I am loading the con-ed.css stylesheet first, so its values should override any other sheets, plus there is no mention of <h1> or <h2> in the stylesheet for my navigation bar.

Any help or suggestions you could give will be greatly appreciated!

wncmacs

The following code contains a div tag with height and overflow specified. If the content inside the div causes the height to exceed 75px, the div will auto scroll.

My problem is that the second div (id=content_div) ignores the height/overflow rule assigned to its parent div and displays its content as if its parent div doesn't exist. Because of this, if you scroll the first div (id=scrolling_div), the content within "scrolling_div_2" remains on the page, ignoring the scrolling action of its parent, while the content within both scrolling_div_1 and scrolling_div_3 scroll correctly.

If I remove the DOCTYPE declaration on line 1 (which I don't want to), the code below renders correctly, and the content inside "scrolling_div_2" scrolls in the same way that the other 2 scrolling_div tags do. I can't exactly remove the DOCTYPE declaration, aside from trying to be compliant, it breaks formatting elsewhere in my site.

Any help of suggestions would be appreciate.

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">
<title>Test Page</title>
</head>
<body>
<div style="height:75px;width:250px;overflow:auto;border:1px solid black" id="scrolling_div">
             <div id="content_div_1" style="margin-top;15px;">hello</div>
	<div style="border:solid #647aae;border-width:0 1px;background:#b0c0e6;" id="content_div_2">
		<div style="position:relative;top:-1px;left:0;border:solid #647aae;border-width:1px 0 0;">
			<div style="top:2px;border-width:0 0 1px;padding: .3em .3em .1em;">
				asfd<br />
				asfd<br />
				asfd<br />
				asfd<br />
			</div>
		</div>          
	</div>
             <div id="content_div_3" style="margin-top;15px;">hello</div>
</div>
</body>
</html>

Hi Guys,

I'm building a page, and the body has been given a background color. I have a container DIV, and within it are several divs that hold individual elements. I need the background of the container div and everything in it to remain white, regardless of the color of the body background.

<!--- Body tag --->
body
{
background: #FF00AA; color: #000000;
font: .8em arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

<!--- container div---->
#pages
{ background-color:#FFFFFF;
width: 900px;
}

<!--- nested container divs --->

#pages title
{
display: inline;
width: 375px;
float: left;
padding:0 .25em .5em 0;
}


#pages categories
{
display: inline;
width: 20%;
float: left;
padding:0 0 0 0;
}


But this isn't working.. What am I doing wrong here? I just need to make sure EVERYTHING's background is white when it's placed within the container div (pages).

I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you.

Code:

<html>
<head>
	<title>Untitled</title>

<style type="text/css">  
  <!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
	position:relative;
	padding:0em;
	width: 930px;
	height: 27px;
	margin:0em;
	background-image: url(images/nav/navBg.gif);
	background-repeat: no-repeat;
}
.NavLeftPad {
	position:relative;
	padding:0em;
	width: 87px;
	height: 27px;
	margin:0em;
	float:left;
	background-image: url(images/nav/spacer.gif);
	background-repeat: no-repeat;
}
.NavRightPad {
	position:relative;
	padding:0em;
	width: 87px;
	height: 27px;
	margin:0em;
	float:left;
	background-image: url(images/nav/spacer.gif);
	background-repeat: no-repeat;
}
.Nav2pxPad {
	position:relative;
	padding:0em;
	width: 2px;
	height: 26px;
	margin: 1px,0px,0px,0px;
	float:left;
	background-color:#54636D;
}
.NavLink {
  	font-size:12px;
  	color:#FFFFFF;
  	font-family:arial,helvetica,sans-serif;
  	text-decoration:none;
  	font-weight:normal;
  	line-height: normal;
}
.NavBlock {
	position:relative;
  	padding: 7px,3px,0px,0px;
  	height:26px;
  	margin: 1px,0px,0px,0px;
  	float:left;
  	background-color:#54636D;
	text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
  -->
  </style>	

<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray

var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
  var apoldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = aponfunc;
  } else {
    window.onload = function() {
      apoldonload();
      aponfunc();
    }
  }
}
function NavInit(){
	if (theNavState != '') {
		document.getElementById(theNavState).style.backgroundColor = "#E46804";
	}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
	if (theElement != theNavState) {
		document.getElementById(theElement).style.backgroundColor = "#54636D";
	} else {
		document.getElementById(theElement).style.backgroundColor = "#E46804";
	}
}
</script>
  
</head>
<body>

<div id="NavContainer" class="NavContainer">
	<div id="NavLeftPad" class="NavLeftPad"></div>
	<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
	<div id="NavRightPad" class="NavRightPad"></div>
</div>

</body>
</html>

Please look at this page in IE7 and FF

http://ameritech.tmhdesign.com/x.asp


The margin-top for the footer div and the h3 margin for this element are ignored...

Code:

div#hp_service{
background:transparent url(../images/hp_service_div_bg.jpg) no-repeat;
width:436px;
height:330px;
margin-left:14px;
}

div#hp_service h3{
margin:10px 0 0 10px !important;
font-weight:normal;
}

PS. After making this post I modified the div in question to have the h3 position absolute, and I added a div called .ser, but in FF the layout is all messed up, in IE it is fine. I put a bg color of blue on the div.ser and I see the height is messed up. Why don't the p element expand the height of the parent div?

Hello Everyone @ Devshed,

I'm trying to improve my limited CSS skills and have a few simple questions which would really help clean up my HTML. I haven't been able to find the answer in the excellent CSS resources in the sticky (if you haven't already they are worth checking out), or in past questions so here is a new post.

I understand it is possible to set styles for html tags which then apply to all document elements without having to specify a class in the actual html, so a style sheet looking like,

table {border: 1px solid #000000; background-color: #EEEEEE;}
th {font-weight: bold;}
td {font-size: 10px;} ....

Applies to a table such as the one below without having to specify a class attribute in each element.

<table>
<th>Title</th>
<td>Cell </td>
</table>

I have 8 small tables on a page and would like to specify each with a unique style. A example styling could be

table .style1 {border: 2px solid #000000; background-color: #CCCCCC;}
th .style1 {font-style: italic;}
td .style1 {font-size: 12px;},

Is there anyway I can re-write the style sheet declarations so that I declare the style I want to apply to the entire table just the once? As opposed to writing class='style1' in each table element (see below). Are ID's usefull here?

<table class='style1'>
<th class='style1'>Title</th>
<td class='style1'>Cell</td>
</table>

Thanks in advance for your time,

Peter

Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening.

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?