[Help] <Div> and Css trouble

miaw · 12-05-2007, 11:57 PM

Hi All...
My name is Miaw ^_^
i have this 'might be stupid' problem about css and div...

i made a welcome page, with css and some div for the header, and all the placement....and it's all looks good on Firefox browser....

But....when i preview it [offline] on Internet explorer [IE 6.0.26]....the writing is on the middle...

well...anyway, here i upload the HTML code, the css[s] if anyone here would like to help..
http://indoupload.net/files/15705/Miaw.zip

Here's the screen capture
In Firefox [the ideal/right one]

In IE [the problem!]

thanks in advance

Pardon my bad english

Boogle · 12-06-2007, 01:20 AM

I can't download your file because it's either in the wrong folder for IUSER to access or it's not there anymore! Please could you paste your CSS and HTML into a reply within the [code] tags then i will be able to help,

Boog's

P.S. welcome!

miaw · 12-06-2007, 01:41 AM

It's nice to hear a reply ^_^
thanks for replying this thread

the code?...here they are:

The HTML

Code:

<body rightmargin="0" onLoad="P7_ExpMenu()">

<div id="container"><!-- container pembuka -->

<div id="header1"><!-- header pembuka -->

<div id="header-menu"><!-- header menu pembuka -->
  <div id="header-menu-kiri"><img src="images/logo_fe_top.gif" width="190" height="60"></div>
    <div id="header-menu-kanancont">
      <div id="header-menu-kanan">
	  
        <DIV id="menuwrapper">
          <UL id="p7menubar">

			<LI><A href="../welcome.jsp" target="_blank">Home</A></LI>
            <LI><A href="../logout" target="_self" class=trigger>Logout</A></LI>
			<br>
			<LI><div id="prodisi2">Selamat Datang <br>
								  Buyer </div> </LI>
								  <br>
			

				<div id="prodcont">
				<div> 
				  
			
            <BR class=clearit>
          </UL>
		  
        </div> <!-- menuwrapper -->
      </div> <!-- header-menu-kanan -->
      <div id="header-menu-kanan1">
        <div id="header-menu-kananisi"><img src="images/logo_fns_trans.gif"></div>
      </div>
</div> <!-- header-menu-kanancont -->
</div> <!-- header-menu -->
</div> <!-- header1 -->

The CSS:

Code:

#header-menu-kanancont {
			padding top: 0px;
			margin-left: 200px;
			}
			   
			#header-menu-kanan{ 
			
			margin-left: 200px;
            padding-top: 0px;
			display: inline;  
			}
			
			#header-menu-kanan1{ 
			
			margin-left: 400px;
           
			display: inline; 
			
			}
			
			#header-menu-kananisi{float: right;padding-left:0px;padding-top: 10px;}
			
			   
			#header-menu-kanan-tulisan {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:11px; 
			color:#FFFFFF; 
			word-spacing: 5px
			}
						   
			#header-menu-kanan-tulisan a {
            font-weight: bold; 
		    text-decoration: none;
			font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:11px; 
			color:#FFFFFF; 
			}
							 
			#header-menu-kanan-tulisan a:hover { 
            border-bottom: 
			#ffffff 1px dashed ;

Boogle · 12-06-2007, 02:07 AM

OK you have tonnes of error's here. your HTML and CSS is no where close to validation:

<body rightmargin="0" onLoad="P7_ExpMenu()"> This is wrong: use: style="margin-right: 0px;"

don't use CAPITAL letters for declaring elements, i.e.
<LI></LI> you must use <li></li> for it to be XHTML valid.

you cannot nest a <br/> within a <ul>, i.e.
<ul>
</br>
</ul> IS NOT ALLOWED

<div></div> is also NOT ALLOWED to be nest within a <ul></ul>

There's too many errors for me to spend time fixing man! redo your page imo...

You have waaaayyyyy too many containers! More than what you need!
First clean up the code and then i think you start seeing results.

Boog's

miaw · 12-06-2007, 02:20 AM

i see...T__T
hmmm....anyway, again thanks for replying...

well, can i ask u another question?

if
<ul>
</br>
</ul> IS NOT ALLOWED

then what do u recomend to replace 'space (br)'?

and also
if
<div></div> is also NOT ALLOWED to be nest within a <ul></ul>
is not allowed

then what do you (again) recomend to replace...or should i use table instead?

thanks alot...^_^

Boogle · 12-06-2007, 02:23 AM

OK You just an empty <li></li> tag if you want to use a space but be sure it's list-style-type property is set to 'none'

you don't need a div with in a <ul> I don't understand why you want it? Explain...

<ul> = UNORDERED LIST, this element is used for making lists... i would use soley <div's> only to make the page you have tried to make.

That's just me though...

miaw · 12-06-2007, 03:01 AM

Hmmm...well...actually, to be honest, i didn't create the pages from the beginning...and i'm not a 'real' webmaster to start with ^_^

anyway....
can u recommend any 'fast' solution [i don't mean to sound too lazy or all ^_^]
cause this one due on tomorrow...

So u see, in firefox...[the ideal/the one that my boss wanted]...the 'Selamat Datang Buyer" writing placed in the right...

Pic:

While in IE 6...it displayed like this
Pic:

Anyway, for all those answer, i sincerely thank you ...

warm regards

-miaw-

Boogle · 12-06-2007, 04:48 AM

OK just looking at your picture i'd do something like this:

all use obtrusive code for this example but wouldn't do normally so you an move the styles into a stylesheet or a style tag:

Code:

<div style="width:800px;";>

<div style="float:left; width:20%;">
<img src="yourimage.ext" alt="" />
</div>

<div style="float:left; width:60%; text-align:center;">
<ul style="list-style-type:none; margin-bottom:0;">
<li style="display:inline;"> Home |</li>
<li style="display:inline;"> Log Out </li>
</ul>

<p style="margin-top:0; margin-bottom:0;">
Selamat Datang Buyer
</p>
</div>

<div style="float:right; width:19%;">
<img src="yourimage.ext" alt= ""/>
</div>

</div>

I know this works because i tested it for you

Boog's

miaw · 12-06-2007, 07:27 PM

sorry for the late reply...

thanks for providing this code...i'll try it and later report it to u

thanks alot ^_^

chicgeek · 12-07-2007, 08:31 PM

Moved to coding.