Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Problem Aligning In Firefox, Problem aligning an image in Firefox.
Jaxx
post Aug 4 2008, 09:29 AM
Post #1


Newbie
*

Group: Members
Posts: 4
Joined: 4-August 08
Member No.: 65,972
Hello everyone!

I am new here. smile.gif

I am looking for some advice...I've been fiddling around with my site for the last few hours and have had no luck!

www.thelatency.com/test/tour_dates.php as you can the image header above all the text is aligned perfectly in IE and not in Firefox. Any ideas?

Thanks so much in advance. smile.gif

(list)

Go to the top of the page
 
+Quote Post
KingSingh
post Aug 4 2008, 02:04 PM
Post #2


Newbie
*

Group: Members
Posts: 8
Joined: 4-August 08
Member No.: 65,986
What do you want to do? Which image? How should it be aligned?

It would help if you gave this sort of information, and maybe post the header code so we can see what you've done wrong and right?

(list)

Go to the top of the page
 
+Quote Post
Jaxx
post Aug 4 2008, 06:51 PM
Post #3


Newbie
*

Group: Members
Posts: 4
Joined: 4-August 08
Member No.: 65,972
Oops I'm sorry!

This is how the image should look:

Attached File  right.jpg ( 202.9k ) Number of downloads: 10


But it looks like this in Firefox:

Attached File  wrong.jpg ( 209.43k ) Number of downloads: 8


The code I'm using in the stylesheet is the following:

CODE
#news-content-title {
position:absolute;
left:460px;
top:525px;
width:440px;
height:69px;
}


And the code I'm using to embed it on the page is:

CODE
<div id="news-content-title">
<img src="images/TourDates.jpg" width="600" height="61" alt=""></div>




(list)

Go to the top of the page
 
+Quote Post
truefusion
post Aug 4 2008, 08:25 PM
Post #4


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,893
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
Try using a negative margin instead of manually setting its position (assuming you want the image to slightly overlap the banner):
CODE
#news-content-title {
    position: absolute;
    margin-top: -10px;
}

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Aug 5 2008, 05:34 AM
Post #5


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,994
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
You should not need to use Absolute position for this design.

Review Margins, and Padding to achieve the effect you want.

Also, add a correct Document Type Declaration to avoid Quirks Mode in IE.

(list)

Go to the top of the page
 
+Quote Post
Jaxx
post Aug 5 2008, 05:55 AM
Post #6


Newbie
*

Group: Members
Posts: 4
Joined: 4-August 08
Member No.: 65,972
I tried adding a margin and padding and still no luck. sad.gif Any other ideas?

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Aug 5 2008, 07:19 AM
Post #7


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 681
Joined: 20-June 07
From: Auckland
Member No.: 45,102
Ok I saw this this morning but I had no time so I'm only looking at it now. Your using an id tag in the new page but it has no define CSS for it that's why its not showing up correctly in fire fox. Also there is another problem you are using absolute positioning to control the heading and content so I guess it still works but not my idea way to do layouts.

I've attached a screen shot in Firefox view with firebug. I checked the first style on your main page and just changed the id to that so its using that style 'new-content-main'
Yours is 'new-content-title' so either make a new style for that and adjust accordingly.

You will also have to adjust 'new-content' id as you can see in the screen shot its being effected as well but keep in mind if your other pages are using that same id it will be effected too so there it is I've pointed out the problem hope you can decide on a solution and have fun biggrin.gif




Attached File(s)
Attached File  Picture_3.png ( 529.74k ) Number of downloads: 5
 

(list)

Go to the top of the page
 
+Quote Post
anwiii
post Aug 5 2008, 07:56 AM
Post #8


Privileged Member
*********

Group: [HOSTED]
Posts: 572
Joined: 5-March 06
From: Warsaw, MO
Member No.: 19,564
looks like you got it solved. good job

i would suggest tweeking your image links because at first glance, they don't look like links at all because of the limited spacing. would look better if spaced the images or create a roll over effect. would be a better read.

i use nothing but firefox so decided to go to your site but saw you didn't need any imput from me as you fixed the problem. again. good job bud

(list)

Go to the top of the page
 
+Quote Post
Jaxx
post Aug 6 2008, 07:08 AM
Post #9


Newbie
*

Group: Members
Posts: 4
Joined: 4-August 08
Member No.: 65,972
QUOTE(sonesay @ Aug 5 2008, 07:19 AM) *
Ok I saw this this morning but I had no time so I'm only looking at it now. Your using an id tag in the new page but it has no define CSS for it that's why its not showing up correctly in fire fox. Also there is another problem you are using absolute positioning to control the heading and content so I guess it still works but not my idea way to do layouts.

I've attached a screen shot in Firefox view with firebug. I checked the first style on your main page and just changed the id to that so its using that style 'new-content-main'
Yours is 'new-content-title' so either make a new style for that and adjust accordingly.

You will also have to adjust 'new-content' id as you can see in the screen shot its being effected as well but keep in mind if your other pages are using that same id it will be effected too so there it is I've pointed out the problem hope you can decide on a solution and have fun biggrin.gif


You are amazing thank you!!

Thanks everyone for trying! smile.gif

(list)

Go to the top of the page
 
+