CSS - Ie And Firefox Issues! - Of Course

sean.dynahosting.net/wordpress

^if you open this in firefox, It is almost exactly how I want, but when you open it in ie, all sorts of troubles arise. Most importantly, the meat of the page (everything except the header and footer) are not centered, and are not 60% of the page, like this:

.basic{
font-family: courier new,courier,monotype;
font-size: 11px;
width: 60%;
margin-left: 20%;
}


says. How much more simply can I put it? Is there anything I can do to fix this, or if not, is there anyway to get browser specific with css?

Screw it.

Hello,

I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear.

http://oharenoise.org/2010_news_releases-2.htm

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?

It displays fine in firefox, but not in IE. I haven't done anything personally with websites since php was first coming out, so css is completely new to me and Im using a (now modified) template instead of from scratch. So any help would be great.

WARNING: Linked site is not work-safe

Site is at 'razornow.comlu.com'

css code is:
Code:

body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    text-align: center;
    background: #000000;
    margin: 0px;
    padding: 10px;
}

html, #wrapper, h1 {
    margin: 0px;
    padding: 0px;
}

img { border: 0px; }

#wrapper {
    margin: auto;
    text-align: left;
    width: 710px;
    position: relative;
}

h1, h2, h3 {
    font-size: 10px;
}


h1 {
    line-height: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

h2 {
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

h3 {
    padding: 4px 0px 0px 0px;
}

.block {
    display: block;
}

.clear {
    clear: both;
    height: 10px;
}

.left {
    float: left;
    margin: 5px 20px 0px 0px;
}

.right {
    float: right;
    margin: 0px 0px 0px 20px;
}

.readmore {
    text-align: right;
}

 /* page structure */

#wrapper {
    background: url(images/body_t.gif) top no-repeat;
    padding-top: 20px;
}

#body {
    background: url(images/body_bg.gif) repeat-y;
    padding-bottom: 10px;
}

#body p {
    background: white;
}
#nav {
    position: absolute;
    top: 25px;
    left: 253px;
    width: 450px;
	height:35px;
	background: url(images/nav.gif) repeat-x;
}
#nav ul{
	padding: 0px;
	margin: 0px;
	list-style-type: square;
	list-style-position: inside;
}
#nav li{
	padding: 7px 16px 0px 16px;
	margin: 0px;
	height:35px;
	list-style-type: square;
	list-style-position: inside;
	float:left;
	border-right: 1px solid #FFFFFF;
	display:inline;
}

.lastchild{border-right: 0px none #FFFFFF !important;}

#nav a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
}
#nav a:hover{
	color:#fcff85;
}

#current {
    float: left;
    width: 235px;
    margin-left: 10px;
    margin-top: -10px;
    background: url(images/menu_bg.gif) repeat-y;
    border-bottom: 1px solid #05256b;
}

* html #current {
    margin-left: 5px;
}

#content {
    float: right;
    width: 450px;
    padding-top: 40px;
    margin-right: 8px;
}

* html #content {
    margin-right: 4px;
}

#footer {
    background: url(images/body_b.gif) no-repeat;
    text-align: center;
    padding-right: 10px;
    padding-left: 480px;
    padding-bottom: 30px;
}

#copyright {
    position: relative;
    top: -8px;
    color: #989898;
}

/* current column */

#current .nav {
    margin: 21px 6px 5px 5px;
}

#current ul {
    border: 1px solid #8497c2;
    margin: 0px;
    padding: 0px;
}

* html #current ul {
    padding: 3px 0px;
    padd\ing: 0px;
}

#current li {
    list-style: none;
    border: 1px solid #4e698f;
    background: #01285f url(images/harry.gif) left center no-repeat;
    padding: 0px 0px 0px 20px;
    margin: 3px;
}

#current li.readmore {
    text-align: right;
    background-image: none;
}

#current ul a {
    color: #beddff;
    text-decoration: none;
    display: block;
    padding: 3px 12px 3px 0px;
}

* html #current ul a {
    width: 100%;
    w\idth: auto;
}

#current ul a:hover {
    color: white;
}

#current .readmore {
    padding: 3px 4px 4px 20px;
}

* html #current .readmore {
    padding: 0px 4px 1px 20px;
    padd\ing: 3px 4px 4px 20px;
}

#current .readmore a {
    text-decoration: underline;
    display: inline;
}

#currenttitle {
    position: absolute;
    left: 15px;
    top: 409px;
}

* html #currenttitle {
    top: 411px;
}

/* page content */

#content h2 {
    line-height: 1;
    margin: 0px;
    padding: 20px 0px 0px 0px;
}

#content h3 {
	margin: 10px 0px;
	padding: 0px;
	text-transform: capitalize;
}

#content p {
    margin: 10px 0px;
    padding: 0px;    
}

#content .contentbox {
    border: 1px solid #e1e1e1;
    border-top: none;
    padding: 5px 20px 10px 20px;
}

* html #content .contentbox {
    padding-bottom: 11px;
}

#content, #content a {
    color: #868686;
}

#content a:hover {
    color: #000;
}

Hey y'all.

I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember.

The site is www (dot) texasarmor (dot) com

I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same.

Please help...

Also, please if you could, any critiques? Suggestions?

Thanks very much.

-michael

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!

The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example:
Code:

<div style="width:100%;height:50px;">
<ul>
<li style="border:1px solid black;">Hello</li>
<li>World</li>
</ul>
</div>
<br />
<div style="width:100px;height:100%;">
<ul>
<li style="border:1px solid black;">Hello</li>
<li>World</li>
</ul>
</div>

and the CSS
Code:

div {
  border:0;
  background-color:#888888;
  }
ul {
  margin:0;padding:0;
  }
ul li {
  float:left;
  list-style:none;
  background-color:#CCCCCC;
  height:50px;
  width:100px;
  }

The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;.

This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.)

Can anyone provide a fix to get get round this please? Thank you in advance.

I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;}

When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state.

http://www.graphics-tech.com/concept

There is the link for example.

Thanks

The objective:
Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes.

I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it.

I am using a short javascript to change the z-index of the divs in order to produce the tab effect.

The problem:
The whole thing works fine, except for:
- If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll.
- If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox
- Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well.

The question:
Is this a known bug? If so, what is the work-around?
Have I done something dumb? If so, what?

The source:
source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only.

the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem.
the javascript file - the function is at the bottom, 'layer_z_lift'.
the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs.

any questions, post and I shall answer.
Jz.

I'm trying to control the line-height of a list element. I've tried percentage, numbers, and points, without much luck. I'm trying to decrease the vertical spacing between each list element and can successfully do so in Firefox with the line-height property, but when it's viewed in IE, the bottom half of the characters get cut off. Is there a better method to do this in IE?

Thanks!

Hello. Im new to the forums and Im hoping someone would be able to help me and I hope Im posting in the correct forum. I recently redesigned my site with Adobe Dreamweaver utilizing CSS. Both the HTML and CSS validates. I have tried to search for my problem but havent found it already addressed. I had CSS before but my old software didnt support it as well. Im still learning a lot about the CSS so my problem might be minor, but I just dont have enough knowledge yet to know or to even begin to fix it.

The site appeared fine in IE. I didnt think (stupid I know) to test it in firefox. Recently I did and noticed it did not show the top header, the right menu or did it allow you to scroll down the page. Ive read elsewhere that part of my problem may be due to having this at the top of my page

Code:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>

but if I remove that, then the site looks the same in IE as it does in Firefox.

Here is a link to the index page of my site. I currently have the above line of code in the page so you can see what it is suppose to look like. Please view this in both browsers so you can see what its suppose to look like (IE) and how firefox is displaying it:

http://www.herbal-connection.com/index.htm

Here is a copy of my css:


Code:

table.sale {
	border-collapse: separate;
	background-color: white;
	text-align: center;
	vertical-align: middle;
	width: 30em;
	margin-left:auto;
	margin-right:auto;

}

img
{  border-style: none;
}

 
body  {
	text-align: center;
	color: #FFFFFF;
	background-color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
}
.twoColFixRtHdr #container {
	width: 1043px;
	margin: 0 auto;
	border: thin solid #000000;
	text-align: justify;
	background-color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
} 
.twoColFixRtHdr #header {
	background-image: url(herbalconnectionlogo1.gif);
	HEIGHT: 82px;
	background-repeat: no-repeat;
	overflow: visible;
	position: fixed;
} 
.twoColFixRtHdr #header h1 {
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	COLOR: #004278;
	font-size: 30px;
	background-color: transparent;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 5px;
}
.twoColFixRtHdr #header H2 {
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	COLOR: #006397;
	background:transparent;
	vertical-align: top;
	font-size: 20px;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 5px;
}

.twoColFixRtHdr #mainContent {
	background-color: #FFFFFF;
	padding-right: 20px;
	padding-left: 20px;
	position: fixed;
	width: 860px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	color: #000000;
} 
.twoColFixRtHdr #mainContent h1 {
	PADDING: 0em;
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	FONT-SIZE: x-large;
	text-align: center;
	COLOR: #004278;
	MARGIN: 1em;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent h2 {
	PADDING: 0em;
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	FONT-SIZE: large;
	text-align: center;
	COLOR: #004278;
	MARGIN: .1em;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent h3{
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	COLOR: #004278;
	font-size:medium;
	text-align:center;
	background:transparent;
	margin-top: .5px;
}
.twoColFixRtHdr #mainContent h4{
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	color:#B22222;
	font-size:medium;
	text-align:center;
	background:transparent;
	margin-top: .5px;
}

.twoColFixRtHdr #mainContent a:link {
	color: #B22222;
	font-weight:bold;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent a:visited {
	color: #B22222;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent a:hover {
	color: white;
	background: black;
}

.twoColFixRtHdr #mainContent a:active {
	color:#B22222;
	background-color: #FFFFFF;
}
.twoColFixRtHdr #sidebar1 {
	float: right;
	width: 140px;
	background-color: #D7DEE4;
	text-align: center;
	position: fixed;
	background-position: top;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
}

.fltrt {
	float: right;
	margin-left: 8px;
	width: 0px;
}
.fltlft {
	float: left;
	margin-right: 8px;
	width: 0px;
}
.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.center {
	text-align: center;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	color: #000000;
	background-color: #FFFFFF;
}
	
.hrule {
	border-bottom-width: 0.04em;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-top: 0em;
	padding-bottom: 1em;
}

I appreciate all input anyone can give, just please dont get to high techy with me as Im still learning. This is my business site and now I see why my sales have declined since probably a lot of people cant see the site properly. Please let me know if you need any other details.

Thanks,
Pamela

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}