CSS - Ie6/firefox Dont Know Where To Start

Ok, some trouble with Fire Fox and IE.

I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it.

http://ernies.bombinaid.com

Problems

IE:
The main box areas in each page keeps going over the menu!

FireFox:
In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping.

Here is the css code:

Code:

body      {background-color: black}
.header   {width: 100%; margin-left: -1px; margin-top: -4px;}
.links    {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main     {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2    {background: url(corner1.gif) 0 100% no-repeat}
.main3    {background: url(corner2.gif) 100% 100% no-repeat}
h3        {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link    {text-decoration: underline; color: black;}
a:hover   {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr        {color: white}
img.ajm113 {margin-left: 30cm;}

Can someone help me out here?

Hi all,
http://www.zitrote.com/forum/index.php?act=viewforum&f=4

if you see there in IE the two borders on the right dont appear in the topic listing but in FF they do??

i have two css boxes on the company lan, and for one person the two boxes wont appear? is this a problem with internet explorer?

ok, so lets say i have two <div>s. the parent, i want to be a tad translucent, but the child i don't want to be. is there anyway i can stop that opacity property from cascading?

example:
Code:

<style>
#div1 {filter: alpha(opacity=50); -moz-opacity: .5; }
#div2 {propery:value; blah blah blah}
</style>

<div id="div1">
     <div id="div2">
          Some text and content here
     </div>
</div>

thanks!

later

Hey guys, I missed a day of my XHTML class in college and he went over most of the CSS that day, I was sick with the flu and he said that day was the most important, so I'm lost, I need to "Remove any <b>, <i>, <u> and <font> tags and replace them with inline CSS code."

So i come up with something like this

<Style Type="css/text">
<B style="color:blue> This is my display text </b>
</style>

PLEASE HELP ME WITH THIS INLINE CSS! HELP! I'M LOSTTTT!

I have CSS attached to a php page of which none of the CSS information gets printed. what I mean is that if we have a style "purple" which was used on the top sentence of the page, when you go to print that page, it still comes in black instead of the purple color for the purple CSS. What is worse, is that the tables that are setup and shaded for columns from the CSS style's come out without any color. It actually doesn't even print the outline borders of the table.

Ok If you go to:

http://www.zahra-zahra.com/innerPage.html

if you hover over the side menu (sub/subcontact)which are supposed to be nested lists.. you will see some alignment issue with the pink and the brown-ish..

also the nested list was moved a bit forward so i added margin:-0.5em; but IE doesnt like it and has moved the li further back..
relevant code:
PHP Code:
#sideMenu {
    margin-top:0.2em;
    float:left;
    clear:left;
    width:24%;
}
#sideMenu ul {
    float:left;
    width:100%;
    list-style:none;
    margin:0em;
    padding:0em;    
}
#sideMenu li {
    clear:left;
    background-image:url(images/site/backgrounds/sideLi.jpg);
    padding:0.4em;
    margin-bottom:0.1em;
}
#sideMenu ul li ul {    
    margin:-0.5em;
    padding:0em;
    margin-top:0.3em;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
#sideMenu ul li ul li {
    width:100%;
    background-image:url(images/site/backgrounds/sideLiLi.jpg);
}
#sideMenu a {
    text-indent:0em;
    text-decoration:none;
    color:#663333;
    margin-left:0em;
    font-size:1em;    
}
.nestedList a {
    text-indent:0em;
    padding:0.3em;
    padding-left:3em;
}
.nestedList a:hover {
    background-image:url(images/site/backgrounds/sideLiLiHover.jpg);
    background-position: -0.4em 0em; 
} 





HTML

PHP Code:
<div id="sideMenu">
        <ul>                
                <li><a href="">Contact</a>
                    <ul class="nestedList">
                        <li><a href="">sub</a></li>
                        <li><a href="">SUBcontact</a></li>
                    </ul>
                </li>
                <li><a href="">Return</a></li>
                <li><a href="">News</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">bout us</a></li>
                <li><a href="">Home</a></li>
        </ul>
    </div> 





just a side question i have in the above code a nested class.. why cant i do something like

.nestedList ul {

}

i tried that but it didnt work...

I have read several books on CSS. For the life of me I still cant understand why some things do the things they do.

For example, I still dont understand float. Even though I have read for literally hours about floats, I still dont understand why sometimes it goes one place and sometimes it goes another. Whenever I use tables, I feel as though I can place anything anywhere and know that it will always be there, regardless of the browser.

For example, yesterday I spent 30 minutes reading through a tutorial about css navigation in horizonal format. I did it successfully. However, I wanted it to be centered on the page. No matter what changes I made in the CSS for the list, ul, link, etc it would not center on the page. I spent another 45 minutes trying to get it to center on the page. Once I did (wrapped the list in a DIV) then I refreshed the page and the background, which is black was through the page horizontally to each of the nav links instead of a white background like the content portion of the page. A whole new headache. I fixed that by putting the div and nav list in a table with a white background (fixed).

I then check it in internet explorer and the list is not horizontal but vertical. It keep the same look of the nav list links, but is vertical. NOW I have to "hack" my CSS to make it more compliant with an older version of IE?

I just don't understand why so many people think CSS is superior to tables. I understand tables were never designed for, well, designing pages, but for whatever reason, maybe because I am old school, but I find them so much easier to work with. I can never get the outcome I want with CSS and when I do it hardly ever looks the same across multiple browsers.

I want to learn CSS. I want to understand why it is better. Most importantly I want to know how to code in it and if something looks wrong that I know the exact line in the CSS to work with to fix it. I am now just editing line by line to see if I get a change or outcome I want.

Any suggestions? Tutorials? This is driving me nuts.

i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out.

If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy.

(Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas)

Hi,

I'm looking for some help with CSS, specifically "a:visitied".

I want the hover over behaviour to remain the same on html links regardless of whether or not they're already in your history.

Is there a way i can do this?

Many Thanks.

ok ill paste my code for the page and css up -

Quote:
<?php require("header.php"); ?>

<div id="content">
<br><br>
<b>Welcome to Kadafi Legacy.</b><br><br>

<img src="image/yaki1.jpg" alt="Yaki Kadafi" align="left">

Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon and all this and much more can be found at our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> section.<br><br>

The latest news and information regarding projects from the official Kadafi site - <a href="http://www.yakikadafi.com" target="_blank" alt="YakiKadafi.com">YakiKadafi.com</a>, will also be reported and updated daily in our <a href="/news.php" alt="Yaki Kadafi News</a>Kadafi News</a> section.<br><br>

Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon, all this and much more can be found on our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> page.<br><br>

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

<br>

<div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div>

</body>
</html>


ok now, as you see... the writing above all the "CONTENT" and the words "content" should all be on my page as text here -

www.outlawz.frihost.net/fula/test2.php

however, all of it is on the page apart from the part i put in bold, the third paragraph...

also, in the second paragraph my link is for "news" on the page it says its for "history"

if i remove this third paragraph... then the page completely messes up and it has only the first 2 paragraphs and no "content" words show up and the "designed by..." is directly under the first 2 paragraphs in the blue...

here is my css -

Quote:
a:link {color:white}
a:visited {color:white}
a:hover {color:black}
a:active {color:white}

body {background-color: #666666}

#head img { display: block; }

#head{

position: relative;
top: 7px;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#box1{

position: relative;
top: 7px;
left: 140px;
width: 345px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#content {

position: relative;
top: 7px;
left: 140px;
width: 697px;
height: 500px;
font-family: verdana;
font-size: 12px;
color:white;
text-aligh: justify;
background-color: #666666;
background-image: url(image/back.jpg);
padding: 5px;

}


#foot{

position: relative;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 9px;
text-align: center;
color:white;
background-color: 666666;
background-image: url(wavy.jpg);

}



really confusin me HAHA.. please help, thx!!!

Hello all,

This isn't really all that important since I'm using the transitional DTD for HTML 4.01, but, I am curious. For my own work, and not work done for the company I work for, I stick to strict.

I don't know about any caveats in technical documentation writing, but I need to provide a tip or note regarding an item in the list.

Here is an example of what I'm, doing.
item 1 item 2 item 3 item 4 NOTE:a tip regarding item 4 (<-should be a 5) item 5 (<-should be a 6)item 6
To do it in HTML transitional, you can still use the value property:
html4strict Code:
Original - html4strict Code <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> <p>note:blah blah blah</p> <ol start="5"> <!-- this works too --> <li value="5">item 5</li> <!--this also work --> <li>item 6</li> <!-- value not required here if you're using value because it's an ORDERED list so defining the value at the start will begin the order--> </ol>

  

  


 <ol>


 <li>item 1</li>


 <li>item 2</li>


 <li>item 3</li>


 <li>item 4</li>


 </ol>


  


 <p>note:blah blah blah</p>


 <ol start="5"> <!--  this works too -->


 <li value="5">item 5</li> <!--this also work -->


 <li>item 6</li> <!-- value not required here if you're using value because it's an ORDERED list so defining the value at the start will begin the order-->


 </ol>


  

I found the answer to my own question...
w3schools sucks. In the LISTS section of the categorized reference they don't have anything that resembles counter-reset...or in any section for that matter. So does IE 7 for that matter, since it doesn't render the expected results.

Here is where I found a usable solution...not yet tested with IE though.
http://www.arraystudio.com/as-works...-using-css.html

Maybe it's just my inability to fight with IE anymore...but visual studio tells me not to use start. Doesn't say anything about value as a li property though. Being lazy and this being a oneoff, and not really wanting to keep track of if dynamically, I tried to put it as inline styles, which doesn't work in Firefox either.

just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically.
Code:

<div id='leftcolumnmenusouter'><!-- left column menus -->
                    <div id='leftcolumnmenus'>
                        <?php include "columnmenus.php"; ?>
                    </div>
                </div>

                <div id='maincontentcolumnouter'><!-- middle column --> 
                    <div id='maincontentcolumn'>                                
                        <?php                                    
                        if (is("home")) {
                        include "home.php";
                        } else if (is("register")) {
                        include "register.php";
                        } else if (is("login")) {
                        include "login.php";
                        } else if (is("comment")) {
                        include "comment.php";
                        } else if (is("profile")) {
                        include "profile.php";
                        } else if (is("category")) {
                        include "category.php";
                        } else if (is("game")) {
                        include "game.php";
                        } else if (is("links")) {
                        include "links.php";
                        } else if (is("rules")) {
                        include "rules.php";
                        } else if (is("faq")) {
                        include "faq.php";
                        } else if (is("pp")) {
                        include "pp.php";
                        } else if (is("links")) {
                        include "links.php";
                        } else if (is("page")) {
                        include "page.php";
                        } else if (is("news")) {
                        include "news.php";
                        } else if (is("users")) {
                        include "users.php";
                        } else if (is("search")) {
                        include "search.php";
                        } else if (is("taf")) {
                        include "taf.php";	
                        } /*else if (is("submit")) {
                        include "submit.php";
                        } */else if (is("pm")) {
                        include "pm.php";
                        } else if (is("play")) {
                        include "play.php";
                        } else if (is("request")) {
                        include "request.php";
                        } else if (is("contact")) {
                        include "contact.php";
                        } else {
                        include "error.php";
                        }
                        ?>
                    </div>
                </div>

CSS:
Code:

#maincontentcolumnouter {
	width:75%;
	margin:0px;
	float:left;
}

	#maincontentcolumn {
		margin-top:8px;
		margin-bottom:0px;
		margin-left:4px;
		margin-right:8px;
	}
		#maincontentcolumn .ocontentsection {
			margin-bottom:8px;
		}
		#maincontentcolumn h2 {
			text-indent:1em;
		}

#leftcolumnmenusouter {
	width:25%;
	margin:0px;
	float:left;
}
	#leftcolumnmenusouter #leftcolumnmenus {
		margin-top:8px;
		margin-bottom:0px;
		margin-left:8px;
		margin-right:4px;
	}
		#leftcolumnmenus .ocontentsection{
			margin-bottom:8px;
		}
		#leftcolumnmenus h2{
			text-align:center;
		}

#footer {
	margin:0px;
	padding:0px;
	clear:both;
}

Hi,

This is my code

Code:

<style type="text/css">
#leftcolumn {
	float: left;
	width: 10%;
	text-align: center;
	margin: 30px auto;
}

#rightcolumn {
	float: left;
	width: 25%;
	text-align: center;
	margin: 30px auto;
	
}
</style>

<div id="leftcolumn">
<p>Left 1</p>
</div>
<div id="rightcolumn">
<p>Right 1</p>
</div>
<div id="leftcolumn">
<p>Left 2</p>
</div>
<div id="rightcolumn">
<p>Right 2</p>
</div>

I expected it to be centered and both left and right 1 and 2 to be on the same line each left and right I want to start on a new line, although currently they are both on the same line, how can I do this

Thanks

This was my first css project done a couple of months ago, and I recently added some functionality to finish it off. A quick check in different browsers and I find its hosed in Mozilla and Opera. Usually this wouldn't be a problem, and normally requires some light adjustment, but this page is just hosed. Opera doesn't even react to adjustments I make.

I've got 6 hours into trying to make this cross browser, and nothing works. Even link classes that work in IE/Opera, are completely ignored in Mozilla.

I'm assuming if you look at the source you'll be able to see whats going on. I'm trying to break the formatting out of my page to post here for ease of reading, but its taking me some time. The desired effect is acheived in IE.

Any opinions, or help would be appreciated!