Cross Browser CSS question

Dev Shed Forums Sponsor:

April 24th, 2004, 07:49 PM

tekjock

Contributing User

Join Date: Apr 2004

Posts: 54

Time spent in forums: 30 m 10 sec
Reputation Power: 5

Cross Browser CSS question

Im not a newbie to CSS but I am still a bit new to hand coding and div positioning.

heres the link - http://members.cox.net/tekjock/test/

the body section I want it to be
bottom 5px
Left 5px
right 5px

I can get it to look good in firefox but IE it looks like crap. I have tried the above and it does not work.

Any suggestions
Thanks

April 25th, 2004, 01:41 PM

lachesis

Contributing User

Join Date: Sep 2003

Posts: 97

Time spent in forums: 18 h 25 m 37 sec
Reputation Power: 6

I'm not sure what you're asking? The only thing I can see wrong at the moment is the body table touches the menu, is that your question?

If it is what I would suggest is putting them on two different div layers, just put this into your stylesheet and then call them with the approriate tags:

Code:

#left {
	position: absolute; 
	top:100px; 
	left: 2; 
	width: 200px; 
	margin: 1% 1% 0 0; 
}

#middle {
	position: absolute; 
	top:125px; 
	left:210px; 
	width:550px; 
	margin-top: 1%; 
}

So in your main html document, you would put:

Code:

<div id="LEFT" class="main">
    <div id="menu" class="menuColor">
		<div id="menuHeader">Main</div>
	     	<div id="menuItem" class="menuItem"><a href="index.htm">Home</a></div>
	  		<div id="menuItem"><a href="contactinfo.htm">Contact info</a></div>
            <div id="menuItem"><a href="resume.htm">Resume</a></div>
            <div id="menuItem"><a href="links.htm">Links</a></div>
			
	     <div id="menuHeader">Design</div>
            <div id="menuItem"><a href="web_des.htm">Web</a></div>
            <div id="menuItem"><a href="graphic_des.htm">Graphic</a></div>
            <div id="menuItem">Flash</div>
            <div id="menuItem">Services</div>

         <div id="menuHeader">Fun Stuff </div>
            <div id="menuItem">Neverwinter Nights </div>
            <div id="menuItem">PC Modding</div>
            <div id="menuItem">Photo Manipulation</div>
            <div id="menuItem">Cool Links</div>

         <div id="menuHeader">Quick Links </div>
            <div id="menuItem"><a href="http://www.google.com" target="_blank">Google</a></div>
            <div id="menuItem"><a href="http://www.slickdeals.net" target="_blank">Slickdeals</a></div>
            <div id="menuItem"><a href="http://www.spoofee.com" target="_blank">Spoofee</a></div>
            <div id="menuItem"><a href="http://www.fark.com" target="_blank">Fark</a></div>
  </div>

And for the main body tabel use:

Code:

<div id="MIDDLE" class="main">
<table height="100%">
      <tr>
        <td valign="top"><p align="center">Welcome back to Tekjocks Realm </p>
          <p><BR>
  I have been away for a while and I have not made many updates to my site. I have been a little busy, I have been in the prosess of designing and administering a few web sites and also doing some corperate logo design. We offer several design services in <a href="web_des.htm">Web </a>, <a href="graphic_des.htm">Graphic </a>and <a href="flash_des.htm">Flash </a> Design. From small busisness to large corperations we can accomodate your needs. We also specialize in Logo Design we can create several designs per your needs, or if you have an idea we can work together to meet your needs. If you are interested in our service please <a href="contactinfo.htm">contact us </a> and we can discuss what you need based on your needs and budget. </p></td>
      </tr>
    </table>
	<p>&nbsp;</p></DIV>

I think this is what you want - apologies if not.

April 26th, 2004, 11:27 AM

tekjock

Contributing User

Join Date: Apr 2004

Posts: 54

Time spent in forums: 30 m 10 sec
Reputation Power: 5

Im talking about the grey section, i want it 5px from the bottom

April 26th, 2004, 05:29 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 9 sec
Reputation Power: 662

Very difficult to parse mentally. The code is semantically and structurally poor. You should also note that an id applies to one element and one element only.

To see a simple explanation for my suggestion go to my float demo, and note example 3. That's what you have haoppening.

Code:

    </table>
	<p style="clear: both; height: 0px; overflow: hidden;">&nbsp;</p>  <!-- add the style rule -->
	<!-- InstanceEndEditable -->
	<br />  <!-- remove this -->
	  
</div>

</body>

That won't take it all the way to the bottom of a large viewport, but it will guarantee it reaches the bottom of the menu section.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: