CSS - Baffling Firefox Display Problem

Please look at this page in IE -

http://www.downtowntransmission.com/diagnosis.asp

For whatever reason there seems to be some strange width issue going on with the cell in red. The title Origin of Noise should be on one line and I can not figure out why it is not. It is fine in FF and Chrome

I am working on a site, http://callagy.netdbs.com It seems when ever I open a page, make a change, it works just fine insofar as the change is made. BUT, if I make a change to the style sheet (style.css), the change is not effective in the site until I save it as something else,then change the ref. to it in a given page. I then need to go back and save the css file back to style.css so I can see the chagne site wide.

Tom

Hi,

I'm having a problem with FF & scrollbar when I center my page.

When the page is smaller then the window, the scrollbar in FF is complete hiden, not disabled like in IE.

Let's say I have two pages, page1 don't need scrolling and page2 does. So, when I jump from page1 (no scrolling) to page2 (scrolling) my page will shift to the left when the scrollbar apears.

Is there a way to always display the scrollbar like in IE --- display but disable, when need it enable.

Thank you!

Hello ppl,

I have a problem about 6 div's which are displayed inline.

Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another

here is the link http://www.immo-land.ro/test/div-inline.html

and below is the code which I wrote for every DIV

Code:

<div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> 
<a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> 
<br> 
Text here 
</div>

any ideea why is all that mess in firefox ?

10x in advance

See ya all

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?

Is there any way to display a style seperately for Firefox than for any other browser?

Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site.

I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all.

I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me.

I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed...

thanks.

blog.mirana[dot]co[dot]uk

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?

Hi guys,

Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine.

My CSS is below. Thankyou in advance




Code:

#navcontainer {
	margin-left: 30px;
}
#navlist{
	list-style: none;
	padding: 0;
	margin: 0;
}
#navlist li {
	display: inline;
	border-right: 1px solid #000;
	padding: 0 0.4em 0 0.4em;
	margin: 0 0.4em 0 -0.4em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #navlist li
{
	display: block;
	float: left;
}
#navlist li a{
	font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif;
	font-size: 200%; /* set the font size for p, scaled from the body declaration */
	text-decoration:none;
}

#navlist a:link,  #navlist a:visited{
	color: #666;
}     /* unvisited link */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
 	color: #000;
	
}

I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently.

Sample Page: http://www.mybb-emods.com/new/index.htm
CSS File: http://www.mybb-emods.com/new/stylesheet.css

Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers.

Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly.

If anyone has any idea how to fix these problems then I would very much appreciate the advice.

Thanks.

My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it.

Here is the code in the html page:

Code:

<head>
<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
  <h1> Beckin Designs</h1>

Here is the CSS rules in my external CSS sheet:

Code:

.content h1 {
	font-family: "English", sans-serif;
	font-size: 52px;
	font-style: normal;
	/* [disabled]text-transform: uppercase; */
	color: #F7F7F7;
	text-decoration: none;
	width: 930px;
	text-align: center;
	margin: -10px 0 5px 0;
	padding: 0;
}

Thanks!

Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help.

Please see the attached html.

Hi - I've just carefully taught myself to design a site in CSS (as you can tell I'm not an expert - please forgive me this!) It looks great in IE, but the CSS doesn't display at all in Firefox. What have I done wrong?

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

Shawn

PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code


URL: http://www.raisetheratesottawa.org/xhtml/

=====
CSS
=====

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


======
XHTML
======

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>

<link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.