Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS not working under MS IE

Status
Not open for further replies.
ljCharlie

ljCharlie

IS-IT--Management
Apr 21, 2003
397
US
Here's the link to the page I'm working on,
The page works perfectly under Mozilla Firefox but under MS IE 6.0, it is a disaster. Any help is appreciated.

ljCharlie
 
Sort by date Sort by votes
Thanks for the response. At first, I thought it was the sizie of the middle not having enough space to fit the box, but another version I've tried, this is not the case. I increase the space of the middle section and still the problem exist.

ljCharlie
 
Upvote 0 Downvote
I won't be able to test this extensively for a couple of hours, but have you tried removing the spaces around the maincontent image?
Code: 
	  	<div id="mainContent"><img src="images/CenterPicture_2.jpg" alt="" width="493" height="277" /></div>
Oh, and what is that table doing in the banner area?
 
Upvote 0 Downvote
Many thanks for the help. I'm very much appreciated. I deleted the spaces in the image now. I also take out the table in the banner section. The reason I put a table there is because the final page will have a five piece of .gif images that made the logo. I couldn't see any other way to handle 5 pieces of images that made the logo so that is why I used table. But to find out what's wrong with the layout, I've deleted the banner table.

According to what I've calculated, the leftsideMenu is 133px, rightsideMenu is 123px, and so 775px - 256px = 519px available space in the center. However, when I do this 775px - 150 px margin left = 625 px and then subtract 130px from the right I get 495px. So the 519px center space should be plenty of room for the 495px mainContent section.

ljCharlie
 
Upvote 0 Downvote
I managed to get the center section, #mainContent, to aligne much better than before. However, when the user refresh the page, it still looks very displaced and ugly especially under IE. The center div looks fine when first loaded in MS IE but now in Mozilla, the center div is not center correctly. The page is now updated to reflect what I'm talking about.
 
Upvote 0 Downvote
Some of the problems in the spacing in IE for the left side menu will be addressed by
Code: 
#lftSideMenu LI { DISPLAY: block;
	PADDING: 0px;  MARGIN: 0px; }
That is, move the display: block; to the LI level and remove it from the link, hover, etc.
Also, there is no <html> tag in the page, but that doesn't seem to be a problem.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Okay, many thanks for your help. I got it a bit closer to what I want now. However, there are some other tweaks I needed to be corrected. First, somehow this coding #HbtmMenu a:link, a:visited{} doesn't work. But if do this

#HbtmMenu a:link{}
#HbtmMenu a:visited{}

with the same information then it works. Not sure why. Second thing, why is it that now if the texts is longer than the space available and it flows to the second line, the second line is not aligned correctly from the left side as shown the in page,
Third, how do I shrink or minimize the space between the menus? Fourth, the center section is not aligned correctly under Mozilla now.

ljCharlie
 
Upvote 0 Downvote
What about #HbtmMenu a:link, #HbtmMenu a:visited {}?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Nice! That works wonderfully! I'm not sure why the way I did it doesn't work. Any way, I'm getting closer to what I want now. One more thing left. That is, why is the center picture not equally center between the left and right menu? Help on this is needed.

Again, thanks!

ljCharlie
 
Upvote 0 Downvote
Okay, here's another problem I just encountered. I want to create a navigational menu for the left and right side of the page with links as menus inside a layer. Then use the onMouseOver an onMouseOut to control the layer menu. The problem is that there are about 2-5 pixels gutter between the center section picture and leftSideMenu and rightSideMenu div. One solution is to minimize this gap or gutter so when the use mouse over and the layer shows up, it won't disapear as the user mouse over to the layer to select additional links. Here's what I'm trying to do.


There is also a problem with this design in Mozilla Firefox too. Help is appreciated.

ljCharlie
 
Upvote 0 Downvote
I've found another problem exist in my page now. As far as the center picture section goes, it appears to dispaly correctly under Mozilla Firefox but under MS IE it is a mess. However, as far as the sub navigation menu on the leftSideMenu, it's not working under Mozilla but under IE is works just fine.

So if you have any suggestion, I'd appreciated.

ljCharlie
 
Upvote 0 Downvote
First of, I couldn't get the 2-3 pixel gap between the #lftSideMenu and #mainContent, and the #rghtSideMenu and #mainContent to close. Once these gap is closed up, I believed the navigational menu will work. If somehow, this can't be done, is there a way to get the navigational menu work with this layout?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
639
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
693
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top