Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 11-25-2007, 12:28 AM
olliesbooks olliesbooks is offline
Junior Member
 
Join Date: 11-25-07
Posts: 3
iTrader: 0 / 0%
Problem displaying in IE - possibly float drop bug?

Hey everyone.. I've recently finished basic design on my web site on my mac, and thought everything was good to go until I had a few friends check it using Internet Explorer.. on the main page, the blog section next to the side blurb "drops" down below where it is supposed to be. It shows fine in all other browsers, as I checked on browsershots.com. I've tried narrowing the blog, but invariably it appears in the same spot.

I'm really a novice at web design and especially CSS.. can anyone please help me with this problem?

I've attached 2 images, the first of my site in Firefox (how it is meant to appear), the 2nd in IE..

Thanks in advance!




My site: http://www.olliesbooks.com
CSS: http://www.olliesbooks.com/default.css

CSS for the blog/problem area:

#main {
width: 68%;
float: left;
display: inline;
margin-bottom: 50px;
margin-left: 10px;
font-size:85%;
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:30px 10px 15px;
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 11-25-2007, 07:06 AM
StarLab's Avatar
StarLab StarLab is offline
v7n Mentor
 
Join Date: 10-29-07
Location: Ontario, Canada
Posts: 3,444
iTrader: 0 / 0%
Just a shot in the dark, but since your page is fixed width anyway, have you tried using pixel values instead of percentages?

Instead of "width: 68%;" try a fixed value "width: 570px;" (number is an example only)

I haven't come across this problem in IE7, but have seen it in IE6. Explorer is rendering things just a tad too wide, causing the content to get pushed down.

Perhaps check your margins and padding while you are at it.

If I had a debugging tool for IE, I could likely come up with a definite answer.

Perhaps someone else will have an actual solution for you.
 
Reply With Quote
  #3  
Old 11-25-2007, 07:02 PM
olliesbooks olliesbooks is offline
Junior Member
 
Join Date: 11-25-07
Posts: 3
iTrader: 0 / 0%
Thanks for your suggestion, Larry!
I've tried using pixels before, and it seems the same thing happens. No matter how narrow I make the blog section (even, for example, 50px), it gets pushed down in Internet Explorer.. which might mean the problem isn't width or margins/padding at all?

In which case I am soo lost..
 
Reply With Quote
  #4  
Old 11-26-2007, 09:10 PM
Lex94 Lex94 is offline
Junior Member
 
Join Date: 06-26-06
Posts: 12
iTrader: 0 / 0%
Just like Larry suggested try to set both columns to fixed width and make sure total width (2 columns + any margins/paddings) do not exceed total width of the page.
 
Reply With Quote
  #5  
Old 11-26-2007, 10:46 PM
olliesbooks olliesbooks is offline
Junior Member
 
Join Date: 11-25-07
Posts: 3
iTrader: 0 / 0%
Hi, thanks again - I amended the code to fixed width, even narrowed the blog to 470px - the sidebar is 250px, and set total width for the content area to 870px.


Here's a screenshot of the result:



And the CSS:
(for the blog)
width: 470px;
float: left;
display: inline;
margin-bottom: 50px;
margin-left: 10px;
font-size:85%;
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:30px 10px 15px;
(for the sidebox)
/* Show only to IE PC \*/
* html .boxhead2 h2 {height: 1%;} /* For IE 5 PC */
.sidebox2 {
float: right;
width: 250px;
background: url(images/sbbody2-r.jpg) no-repeat bottom right;
font-size: 90%;
}
.boxhead2 {
background: url(images/sbhead2-r.jpg) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead2 h2 {
background: url(images/sbhead2-l.jpg) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.2em;
color: white;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody2 {
background: url(images/sbbody2-l.jpg) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
.boxbody2 .more {
padding-top: 15px;
border-top: 1px dashed #CCCCCC;
}
(overall content)
width: 870px;
margin: 0 auto;
margin-top: 20px;


Appreciate the suggestions thus far - anyone else have any ideas?
 
Reply With Quote
  #6  
Old 11-27-2007, 01:52 AM
kos's Avatar
kos kos is offline
Coding Tiger
 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
I would suggest you to check again your html code and css styles. They're messy...

Tip:
You have defined two different divs with the same ID -> "content" like this:
<div id="content">....</div>
<div id="content">....</div>

And now you ask why the second div is shown below the first one??

Stop creating your (that is learning HTML and/or CSS) websites using Notepad...it's 2007, for god sake..
 
Reply With Quote
  #7  
Old 11-27-2007, 09:08 AM
Boogle's Avatar
Boogle Boogle is offline
Contributing Member
 
Join Date: 09-03-07
Location: England
Posts: 649
iTrader: 0 / 0%
OK you've got yourself in a mess with padding/margins and clumn widths. Basically FF and IE render margins/padding differently I don't know why and I don't know intricates but do this:

HTML:
Code:
<div id="mainContent"> <div id="leftColumn"></div> <div id="rightColumn"></div> <div id="fixFloat"></div> </div>
CSS:
Code:
#mainContent { width:870x; display:inline; } #leftColumn { width:470px subtract (any left-margin/left-paddings) subtract 2px... } #rightColumn { width:250px subtract (any right-margin/right-paddings) subtract 2px... } #fixFloat { clear:both; height:0; margin: 0 none; vsibility:hidden; }
Just looking at what you've pasted olliesbooks I can see a few problems,

Quote:
.boxbody2 {
background: url(images/sbbody2-l.jpg) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
I'm not positive on this but i'm sure when you wish to declare margins/paddings like you have thereyou must declare all four poles, i.e. N, E, S, W or TOP>RIGHT>BOTTOM>LEFT

Can someon clarify that so I don't look silly

Also you don't need float and display:inline use one or the other...

Also that extra div i put in there 'floatFix' is to make sure your following divs clear the floated ones before being displayed.

HTH
Boog's
 
Reply With Quote
  #8  
Old 11-29-2007, 12:18 AM
kos's Avatar
kos kos is offline
Coding Tiger
 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
Quote:
I'm not positive on this but i'm sure when you wish to declare margins/paddings like you have thereyou must declare all four poles, i.e. N, E, S, W or TOP>RIGHT>BOTTOM>LEFT

Can someon clarify that so I don't look silly
no, there's no need to declare all those margin's or padding's values when using them. Declare only what you need and the browser will take care of the rest (that is the browser will use its own predefined values to be used in that case).
 
Reply With Quote
  #9  
Old 11-29-2007, 12:49 AM
Boogle's Avatar
Boogle Boogle is offline
Contributing Member
 
Join Date: 09-03-07
Location: England
Posts: 649
iTrader: 0 / 0%
Thanks, Costin... How did i know you'd inform me with the right info!?

Hope it's going OK anyways.

Boog's!
 
Reply With Quote
  #10  
Old 11-29-2007, 04:08 AM
Tomassi's Avatar
Tomassi Tomassi is offline
v7n Mentor
 
Join Date: 01-26-06
Location: Alkmaar
Posts: 2,504
iTrader: 0 / 0%
Yup, boxmodel in IE6 is different, and It's bloody irritating. I usually make a container div of 500px wide for content, and another div in that one of 460px wide and centered to ad spacing left and right.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Float Help x360 Coding Forum 2 07-26-2007 05:51 PM
Drop down menu problem in dreamweaver Mrs. Grunion Web Design Lobby 10 05-14-2007 01:14 PM
Photoshop - white halo around my GIF - drop shadow problem Bansaw Graphic Design Forum 16 04-04-2007 02:24 PM
Dramatical drop of CTR - interesting problem! advantage Google Forum 5 11-16-2006 04:00 AM
CSS float in IE = no image visible? Shannon Web Design Lobby 10 08-28-2004 04:33 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 06:37 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC