CSS - Strange Border Problem (ie Based)

I'm currently making some site about webmaster resources, etc...
The site displays fine in firefox, but looks really fu/cked up in IE.
Can someone help me fix this? I was trying to make all 3 column to have equal height, and i found some way which works only in FF&Opera. Still, i have problem when i have too much text.

Hi,

I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl)

http://www.ntcjapan.com/languages/arabic/dindex.html

On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it.

Code:

	#main {

		width: 590px;
		padding-top: 115px;
		padding-left: 4px;
		padding-right: 5px;
		background: url(../../../images/0_logo.gif) no-repeat;
		float: left;
		margin: 0px 3px 0px 0px;
	}

I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE.

Any ideas how to make this work?

Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know.

Thanks very much in advance!

Is it possible to pickup a browser worm by visiting a .php webpage? The symptoms are that when I view htm pages from either of the 2 websites I work on - or I visit Microsoft website - the print is all tiny and screwed up. This happens whether I view the htm files on the web or located on any computer in my home/office network. If I view the same files from any other browser/computer - they are perfectly OK. So it's just this browser on this computer - which incidentally views any other website or file perfectly. The page I am suspicious of is http://www.w6dek.com/w6dek10.php. This link was sent to me as a location to do a link exchange. I was suspicious because the email had an attachment - one of those ATTxxxxx.txt types - so I suspected a virus and didn't open it. However, I checked out the http://www.w6dek.com homepage URL and it seemed like a legit site, so I was curious about that page and visited it thinking that just arriving at a php page would not activate anything. But then I got the problem. I've scanned with Norton 2005 with latest updates and got nothing, and I'm right up-to-date with windows security updates too. But I've still got this weird problem. I've also deleted all cached files and cookies etc..

Any ideas! I know there's a really good group in Switzerland that are all over this stuff, but I can't remember the address. Has anyone got a resource? Or an idea?

check out parrisstudios(dot)com/mirage_framing

In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh.

I wan't to say it is like that peek-a-boo bug but backwards....

Code:

ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}

ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}

li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}

ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}

li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}

THANKS!

Hey guys.

I'm still learning css so excuse some crude styles.

I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it.

It doesn't do that in firefox or opera so I don't know whats' going on.

Heres my CSS:

Code:

body {
  text-align: center;
  height: 100%;
  background-image: url(images/bg_title.gif);
}

img {
  border: none;
}

#wrapper {
  width: 780px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: relative;
  background-color: #FFFF7D;
  color: #000000;
  border: solid 2px #0000ff;
}

#header {
  width: 780px;
  height: 143px;
  margin-bottom: 3px;
}
#headerImage {
  width:200px;
  float: left;
  margin-right: 2px;
}
#headerImage img {
  margin: 0px;
}

#headerLogo {
  width: 577px;
  float: left;
  margin: 0px;
}

#headerLogo img {
  margin: 0px;
}

#navagation {
  width: 204px;
  margin-bottom: 1px;
  float: left;
  margin-right: 1px;
}

.navIcon {
  float: left;
  margin-right: 2px;
  margin-bottom: 1px;
  padding: 0px;
}
.navButton {
  float: left;
  margin-bottom:1px;
  padding: 0px;
}

a.navButton:link {
  border: none;
}
a.navButton:visited {
  border: none;
}
a.navButton:hover {
  border: 1px solid #000000;
}

#mainContentArea {
  float: left;
  width: 570px;
  height: 711px;
  border: solid 1px #000000;
  background-color: #ffffff;
  margin-bottom: 3px;
}

#footer {
  height: 1px;
  margin-top: -1px;
  clear: both;
  overflow: hidden;
}

Thanks in advance!

-Tim

I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that?

Help! I've been holding my head on this one for a couple days.

I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it.

Any help would be greatly appreciated!

www dot sccustomfacade dot com slash site


Thank you!

I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it.

Sorry problem solved!

On my new layout I have a navigation box in which the inside needs to contain 5 x 75px wide boxes, all on the same line (Using float:left), but due to the way FireFox and IE handle borders differently the size needs to be 381px wide in IE (Due to the 3px border) and only needs to be 375px in Firefox.

Obviously for now I have opted to go for 381px as the width, as it works in Firefox too, but it makes a few pixel gap on the right, is there anyway to get around this??

Thanks in advance.

why is the top border on the links called "Sva Ponuda Farovi Felge Pragovi Retrovizori Spojleri" not showing up in IE??

http://www.xtreme-style.com/item.cfm?prodID=371&ID=0

here is my css code for the links

Code:

/**BEGIN CATEGORY LINK EFFECTS**/
	a.category_links:link {
		color:#003366;
		text-decoration: none;
		background-color:#efefef;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}
	
	a.category_links:visited {
	    color: #003366;
		text-decoration: none;
		background-color:#efefef;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}
	
	a.category_links:hover {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}
	
	a.category_links:active {
		color: #003366;
		text-decoration: none;
		background-color:#efefef;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}


/**BEGIN CATEGORY LINK EFFECTS**/
	a.category_links_selected:link {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}
	
	a.category_links_selected:visited {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}
	
	a.category_links_selected:hover {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}
	
	a.category_links_selected:active {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}

Thanks in Advance.

I have a small problem with the way borders are displaying around a rounded box in IE. Below are screen shots of what it looks like in FF (which is correct) and IE (broken):
http://img332.imageshack.us/img332/7734/example1do7.jpg
http://img307.imageshack.us/img307/4980/example2xo5.jpg

As you can see, in IE the border runs over the GIF corner on the lower left and right, and the upper right. Here is the relevant CSS code:

Code:

b.cn {
position: absolute;
height: 10px;
width: 10px;
margin: 0;
padding: 0;
background: url(images/greycircle.gif) no-repeat;
line-height: 1px;
font-size: 1px;
}

.box {clear: both; position: relative; background: #000; width: 425px;}

b.tl {top: -1px; left: -1px; background-position: top left;}
b.tr {top: -1px; right: -1px; background-position: top right;}
b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
b.br {bottom: -1px; right: -1px; background-position: bottom right;}

div.box {
margin: 0 0 20px 0;
}
div.box {
border: 1px solid #999999;
background-color: #be9;
color: #000000;
background: url(images/boxgrad.gif) repeat-x top left;
float: left;
}
div.box .boxbody {
padding: 10px 20px 10px 20px;
border: none;
}

.boxhead {
font-size: 16pt;
font-weight: bold;
}
.boxtext {
font-size: 11pt;
}

and the relevant HTML code:

Code:

<div class="box">
<div class="boxbody">
<span class="boxhead">This is the title</span><br>
<span class="boxtext">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</span>
</div>
<b class='cn tl'></b>
<b class='cn tr'></b>
<b class='cn bl'></b>
<b class='cn br'></b>
</div>

Any help would be greatly appreciated.

Hi, here's the CSS layout:

http://www.abhiram.astahost.com/newlayout4/

The menu layout has been taken from 'Suckerfish menus' in http://www.alistapart.com

The curved borders has been taken from http://www.webreference.com/program..._borders/2.html

I've been trying to make curved borders for the header and the content. It displays it just the way I want it to in Firefox, but for some reason, the content part is giving a big gap in IE. I've used the same code with minor adjustments for both header and the content, but there is a problem only with the content. I've spent 2 hours and am at my wits end. Any leads?

Source:

http://www.abhiram.astahost.com/newlayout4/index.html
http://www.abhiram.astahost.com/newlayout4/mystyle.css
http://www.abhiram.astahost.com/newlayout4/iefix.js

Thanks.

Hi,

I am trying to apply a bottom-border to a TR element. The border shows fine in Firefox, but will not display in IE6. Any ideas what is causing this?

Page: http://explosiveracing.net/wow-guild/forum/
CSS: http://explosiveracing.net/wow-guild/css/forum.css(Under the .headers declaration)