• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 13 posts ] 
Author Message
 Post subject: Div problem with Firefox vs IE  Topic is solved
PostPosted: Thu Dec 22, 2005 12:15 pm 
Does someone know why this site: http://www.strandredders.be/indextmp.php

look different using IE or Firefox? And for once, the Firefox look is messed up while IE does the right thing?

I've modified the layout template so the footer div is outside the page div. Also, i modified the layout stylesheet so the footer class shows up like this.

Strange... I've tried many things to fix it, nothing helps. Then i opened up IE and saw this was like it should be  ???

And apart from this, can anyone tell me how to edit the CSSMenu? I'd like to edit some properties of it, because now i can change the colors etc, but the links it takes are used from the general links properties (color & decoration etc). I'd like to modify those.

Thx already


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 12:35 pm 
Offline
Power Poster
Power Poster

Joined: Sat Sep 10, 2005 4:45 pm
Posts: 650
Location: Växjö, Sweden
Hi Spheerke,

The content div is adding some margin if not set. Set this to div#content:

\$1:
margin-bottom: 0;


Out of curiosity, why did you move the footer outside the page anyway?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 1:00 pm 
the footer has feathered edges, and if the footer is inside the page, the borders continue untill the bottom (overlapping the normally feathered edges of the footer). If you know what i mean? So the footer has rounded edges but the page has a square structure, so it would kinda mess it up.

I also tried some table design but as table design is referred to as "bad" i refuse to try that way :) This is my first decent css project and i would like to make something nice of it.

thx for the margin. Works now.

I've put the footer back into the page so you can see the effect.

/edit: ok so i've edited the margin for the footer to -12px and now it is in place. At least, in Firefox, now it's messed up in IE. Aargh so many hours, just for a footer  :o :)


Last edited by Spheerke on Thu Dec 22, 2005 1:03 pm, edited 1 time in total.

Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 1:05 pm 
Offline
Power Poster
Power Poster

Joined: Sat Sep 10, 2005 4:45 pm
Posts: 650
Location: Växjö, Sweden
Ok, I see. You could also wrap it in another container (that contains the div with the borders and another one for the footer), so that if you want to change the page width you will only have to change in one place and not for the footer as well. But of course your solution works just as fine. ;)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 1:48 pm 
Ok another problem:

I've put 2 images in div's and put them next to each other (the second img should become a flash intro). Apparently they still think the second image is on a second line, because they take up all the white space there (http://www.strandredders.be/indextmp.php). I've used the relative position argument and used top: -260px;

Any ideas? (god i'm a noob on this)

But really, i've seen quite some cms's and this one looks the most promising (as in simple) to make a nice design with.


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 2:02 pm 
Offline
Power Poster
Power Poster

Joined: Sat Sep 10, 2005 4:45 pm
Posts: 650
Location: Växjö, Sweden
You need to use float to put to divs on the same line.

Compare this with the CSS that you're currently using and you get the idea:

\$1:
    /* INTRO-IMAGE */
        div#intro-image {
            margin: 0;
            padding: 0;
            width: 320px;
            height: 260px;
            background: url(images/intro-image.jpg) no-repeat 0 0px;           
            float: left;
        }

    /* END INTRO-IMAGE */

    /* INTRO-FLASH*/
        div#intro-flash {
            margin: 0;
            padding: 0;
            width: 460px;
            height: 260px;
            background: url(images/intro-image2.jpg) no-repeat 0 0px;           
            float: left;
        }


A good tutorial about float can be found here.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 2:07 pm 
nice tutorial. Thx! Got it.  ;)


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 3:14 pm 
Hmm, just noticed that this again collides with IE 's view of the site. Is there a problem with IE and floats?


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Thu Dec 22, 2005 5:28 pm 
So i solved the differences by applying some tricks. IE and firefox look the same now.

I had to:
  • Put the footer outside the page div to make it appear as wanted
  • Put the 2 float images in the center together in one image as IE puts the floats on 2 different lines.


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Sun Dec 25, 2005 11:00 am 
Ok, here i am again:

what is the problem with IE clearing 2 float's on the same line?

This page: http://www.strandredders.be/indextmp.ph ... n_Koksijde works as it should, putting more than one float on the same line, while IE always forces a clear and puts it on the new line.

I've put clear: none explicitely in the left-image div but no help. Furthermore, the images are placeholders, i know they don't work :) And the margins, well they tend to differ also between FF and IE.

Any ideas?


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Sun Dec 25, 2005 1:35 pm 
Offline
Power Poster
Power Poster

Joined: Sat Sep 10, 2005 4:45 pm
Posts: 650
Location: Växjö, Sweden
Hi there,

You have the boxes to the right wrapped in a div with the id main. div#main has width set to 100%, which I think may be what is causing IE to believe that it has to take up the entire width and therefore needs to be under the left-floated element.

The other thing to try is to set float: left for the div#main selector, as it is the entire main div that you want to be in the right column.

About float margins in IE and FF, yes, there is a bug in IE that causes an additional margin when two floats are put beside each other. Look in this article for the reasons and solutions to that: http://positioniseverything.net/explore ... xtest.html

The following article may also contain some useful info: http://nemesis1.f2o.org/aarchive?id=11


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Sun Dec 25, 2005 1:52 pm 
Ok, apparently the width was set wrong for IE to parse it as it should. The link about the float wrapping and dropping was very helpful! You're like a living database, aren't you westis  ;) Thx. (though i suppose you just know where to look :))


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Div problem with Firefox vs IE
PostPosted: Mon Dec 26, 2005 12:20 am 
Offline
Power Poster
Power Poster

Joined: Sat Sep 10, 2005 4:45 pm
Posts: 650
Location: Växjö, Sweden
Spheerke \Spheerke:
You're like a living database, aren't you westis ;) Thx. (though i suppose you just know where to look :))


;D Hehe, I knew about the three pixel gap since before and Google is your friend in cases like these. ;D I wish I could save all that info in my personal database, but unfortunately there ain't enough memory left and the HDD is in desperate need of defragmentarization... ;)

I am in the process of putting together a list of useful links for CSS issues, as I think a lot of people would find that helpful. But I'll still be in Christmas mode for another few days, so I only drop in here occasionally until then.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 13 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting