CSS - Spacing Issue With Opera

Greetings,
I am attempting to increase the space between the navigation links listed on the left column of this index page.
fop27.org/fopnet/FPT/
I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page.
I have minimal knowledge of css and would greatfully appreciate any assistance.
All the Best!

Hi there,

I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help!

Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #eee;
background-color: #ffffff;
text-align: center;

}
a {
text-decoration: none;
color: #eee;
outline: none;
font-size: 12px;

}
a:visited {
color: #ccc;

}
a:active {
color: #ccc;

}
a:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;

color: #000000;
text-align: left;

}
#head {
padding: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
border-top: none;
border-right: 1px solid #43709e;
border-bottom: none;
border-left: none;
text-align:left;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
height: 110px;

}
#yellowStrip{

width: 726px;
background-color: #e7d77e;
height: 10px;/*height is not functioning?? */
padding: 0px;


}
#lftBar {
width: 93px;
background: #43709e;
float: left;

}
#mainBox {
border-right: 1px solid #43709e;
margin-top: -1px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: #43709e;
border-top: none;
width: 726px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
}
.innerbox {
padding: 30px;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left:93px;


}
#bottom {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:left;
voice-family: "\"}\"";
voice-family:inherit;


}
#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #ccc;
}

Hi everyone,

I'm a little stumped on why I'm having a wide space showing up when viewing a particular page with FF and not IE7.

Take a look at the following page...

http://spotabusiness.com/View-user-profile.html?user=403

Notice the big space between the profile picture and the tabbed box below it in FF. This space doesn't exist when using IE7.

Thanks for any input

I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough).

Here's the address. The CSS coding is on the actual page for easy viewing.

link

So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it.

I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute?

Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent.

Any suggestions?

This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum.

I adapted this social network bookmarking thing that I've seen kicking around.
It uses prototype and scriptaculous that is why I am posting it here.

It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page

http://demo.tixrus.us/calendar.php?filter=all

below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source
each icon is on its own line?
Code:

<a href="xxxxx"><img ....../></a>
<a href="yyyyy"><img ...../></a>

as opposed to jam packing the codes into extremely long lines
Code:

<a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a>

I remember this being an issue with most browsers many yrs ago..
I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of

http://demo.tixrus.us/styles/tixstyles.css

I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue.

I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using:

Code:

<h3 class="blue_title">Bob Smith</h3>
<p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since&nbsp;1999.</em></p>
<br /><br /><br />
<p> </p>
<h3 class="blue_title">Edgar Jones</h3>
<p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since&nbsp;2005.</em></p>
<p> </p>

Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings.

Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table.

Thanks.

(p.s. - I am using joomla for this site but I don't think that's relevant to this question.)

the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

Hi,
This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks.

the CSS:
Code:

#menu {
	margin: 0px;
	padding: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}
#menu ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

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


#menu ul li a {
	border-top: none;
	border-bottom: 1px solid black;
	padding: 2px;
	margin: 0px;
	text-decoration: none;
	display: block;
}

#menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	background-color: #fffed9;
}

the html:
Code:

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

plug this in and view it in ie and you'll see what i mean.

Well, I am finishing up my portfolio website, and I am running into an issue with the footer.

For the CSS for my footer I have:

Code:

.footer {
	background-image: url('images/header-top.gif');
	background-repeat: repeat-x;
	background-color: #2b2f36;
	width: 100%;
	height: 80px;
	margin-top: 900px;
	color: #FFFFFF;
	text-align: center;
	padding-top: 30px;
}

I have to have the "margin-top" because if I don't it will automatically be set to the top, behind everything else. On Firefox, and IE7 it seems to be coming out good, only issue is with IE6. I am aware that IE6 has spacing issues, is there a simple hack or quick fix I can do? If not, what is the best solution to do this?

The link to the site is www.peterbarbosa.net

Thanks,
Peter

For some reason, this

PHP Code:
 input.headtext {background-color: #515153;border: 0px outset #515153;} 





leaves a bright yellow hideous border around the input field. Is there any way to get rid of that? This works fine in IE and Netscape, but Opera 7.x makes it look like ****.

hey,

I have problems with getting CSS to display properly in Opera.

http://www.hostultra.com/~lunaxy/home.php

this host SHOULD be working. Anyway, the problem is with the side navigation menu. In Opera, theres gaps between the top and left bits (I used these to create the curved box effect). How do I get rid of this?

2nd problem. How do I move the top right navigation to the far right side. I can't float it without making it look bad in Opera (but IE and mozilla are fine). I want the stuff in the yellow box to be at the right side.

thanx ppl!

I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this.

1. Block had some sort of padding or whitespace on the right side for some reason.
2. Search button width is short.

Problem in red: URL
Site: URL

CSS: URL

Can someone give me a solution or work around for this problem.

P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work.

Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE.

The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots:

Internet Explorer


and Opera


Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug!

Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out:

my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking!

Any help would be greatly appreciated!


Sajid