CSS - Firefox/explorer Spacing Difference

Here's my page http://www.martcol.co.uk/Andy/

I can't get the image caption to line up in FF and IE6. I know it's something to do with the Box Model but if I get it in one, it goes out in the other....

Here's my CSS http://www.martcol.co.uk/Andy/main.css

I imagine it's only a little tweak on this but I can't seem to get it.

Thank

Martin

Hello,
I use the following css code to define the style of some tables.
However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code:

table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
}
.darkRow td{
	background-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow td{
	background-color: #BFACBF;
	color: #4D3D4D;
	padding-left: 4px;
}

I create the tables something like this: Code:

<table class="listings">
<tr class="darkRow"><td>bla</td></tr>
<tr class="lightRow"><td>bla</td></tr>
</table>

Why does it display so much different in those 2 browsers?

I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox.
Have a look he www.duikeninegypte.nl

The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox?

Cheers for any feedback!
Gurt

PHP Code:
echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> ";
// background image
echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> ";
//start navigation menu
echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> ";
echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> ";
echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> ";
// end navigation

// left panel
echo " <span style=\"position: absolute; left: 20; top: 190;\"> ";
echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> ";
echo " </span> ";

// body panel
echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> ";
echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> ";
echo " </span> ";

echo " </div></center> "; 

is there a way to control the pixel amount a br will space in IE and FF so it's the same distance or is there just an issue in my css causing extra space?

I am trying to build out this site
http://realitysol.com/index.php#

In IE it shows up fine. In Firefox there is a space above the navigation Panel.

Any help would be appreciated.

Below is the CSS used for the navigation Section.
Code:

#navibg {
	background-image: url(../images/navibg.jpg);
	width: 500px;
	height: 40px;
	background-repeat: repeat-x;
}

#headerImg {
	height: 250px;
	width: 500px;
}

#navcontainer ul li
{
	list-style-type: none;
	margin: 0;
	display: block;
	float: left;
	background: url(../images/navi-normal.jpg) repeat-x 20px;
	font: 10px/20px "Lucida Grande", verdana, sans-serif;
	text-align: center;

}

#navcontainer a
{
	color: #000;
	text-decoration: none;
	display: block;
	width: 70px;
	border: 1px solid #666666;


}

#navcontainer li#active { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer {
	margin-top: 10px;
	margin-left: 30px;

}

I dont understand the purpose of Browser that behave differently from each other. Couldn't the browser makers just make it result consistently?

This is my code to make my line spacing bigger or padding. I try to do other style changes and it also has the same problems. In Firefox, doing it this way works but in IE, nothing happens.
Code:

h1 {
	font-size: 10px;
	font-weight:bold;
	line-height:50px;
	padding:10px 10px 10px 10px;
}

Code:

h1 {
	font-size: 10px;
	font-weight:bold;
	padding:10px 10px 10px 10px;
}

Then on my web page I put this in on the text I want to customise.
Code:

<h1>Sample Text</h1>

h1 text is inside my little div box.

Am I doing this wrong to achieve what I want?

Hi All;

I generated this page :

www.lilahd.com/bevi

In webgen and cannot view it correctly on IE . Please view the page in IE and then in Firefox . Why does that happen .

Hi everyone! I'm pulling my hair out on this one. I must confess I'm a bit green when it comes to css, but I've been playing around with this page and was finally able to get it looking the way I want in IE. If you look at it in Firefox or Netscape, the container doesn't expand at the bottom, and the links just spill out. Any ideas on how I can get this to expand like it does in IE?

http://www.gotop100.com/test.html

Thanks!

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, I'm studyng php for content management system.

The php is ok.

I used an external stylesheet, when i see it in Firefox is ok.
But when i see it in Explorer it's not ok.
The problem is on the left colum, the lists don't work well in Explorer.

It seems to be difference between how Explorer and Firefox works with Stylesheets.
If can anyone help to make this css code compatible for the two browsers.

Here's the code of my css :

/* Site Colors:
#1A446C - blue grey
#689DC1 - light blue
#D4E6F4 - very light blue
#EEE4B9 - light tan
#8D0D19 - burgundy
*/

html { height: 100%; width: 100%; }
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4;
font-size: 13px; line-height: 15px; }
img { border: none; }
table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px;}
a { color: #8D0D19;}

#header { height: 70px; margin: 0px; padding: 0px; text-align: left;
background: #1A446C; color: #D4E6F4; }
#header h1 { padding: 1em; margin: 0px;}
#main { margin: 0px; padding: 0px; height: 600px; width: 100%; background: #EEE4B9; }
#structure { height: 600px; width: 100%; }
#footer { height: 2em; margin: 0px; padding: 1em; text-align: center;
background: #1A446C; color: #D4E6F4; }

/* Navigation */
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }

/* Page Content */
#page { padding-left: 2em; vertical-align: top; background: #EEE4B9; }
#page h2 { color: #8D0D19; margin-top: 1em;}
#page h3 { color: #8D0D19; }


Thanks for yout time.

Hi,

I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference.

Here is the css code:

Code:

div#main {
	margin: 10px auto 20px auto;
	width: 1001px;
	border: 1px solid #000000;
	}

div#left {
	float: left;
	width: 150px;
	}

div#content {
	width: 600px;
	margin-left: 160px;
	background-color:#0033CC;
	}

Here is the HTML:

Code:

<div id="main">
	<div id="left">left</div>
	<div id="content">content</div>
</div>

What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border.

However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px.

Any ideas?

Caste

http://www.djoj.net/home.html <- Faulty Page
http://www.djoj.net/style.css <- CSS

Hey, for some reason in Internet Explorer my Div will not center and I do not know why. I will try and prvide more detaily when I get home from school.

Thank you,
~Brendan

Sorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following:

Issue 1:
Profile Display
Issue 1 CSS file
The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text.

Issue 2 *IMPORTANT*:
Profile Display (with missing fields)
Issue 2 CSS file
The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work.

FYI, the pages are dynamically generated so links will not work.

Any suggestions?

Hey guys, I'm in need of some help here.

Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two.

If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself.

Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template.

http://thecheckoutplace.com/compute...eOneNetbook.php

If anyone can offer a hand, it means a lot. Cheers guys.