PDA

View Full Version : HELP? Images Not positioning properly in other browsers


powellcustomdrums
12-30-2011, 05:26 PM
Im using Dreamweaver MX and my site works fine except when i use Layers and put images in the Layers and move the Layers (images inside the layers) on my pages where i want them they preview perfect in Firefox but when i preview my page in IE or Safari all my images are re positioned all over the place! I need to fix this so everyones browser see it properly how can i do this am i doing something wrong when putting my images inside the layers??? i also kind of need to do it the way i am so i can place them all where i want on the page!

Here is the page so you can see what im talking about if you open different browsers -

http://www.powellcustomdrums.com/HOME-ORDER-FORM


Thanks for the help
Brad :)

DWcourse
12-30-2011, 05:58 PM
I'm sorry to have to tell you but using what Dreamweaver calls layers (actually absolutely positioned divs) isn't a good practice. In fact layers are pretty much gone from recent versions of Dreamweaver.

Trying to make layers work the way you want to use them will just cause more problems.

domedia
12-30-2011, 06:56 PM
Another huge issue is the size of the page. over 6.3 MB...

This means that unless you have a broadband connection to the internet, you will not be able to use the web site.

powellcustomdrums
12-30-2011, 07:02 PM
what do you mean 6.3 MB what will it take a long time to load? how do i fix that?

powellcustomdrums
12-30-2011, 07:02 PM
If i didnt use layers how would i place the photos exactly where i want them?

Corrosive
12-31-2011, 07:37 AM
If i didnt use layers how would i place the photos exactly where i want them?

You need to understand what we call page flow where one div and the attributes you give it through CSS affects the divs around and inside it.

powellcustomdrums
12-31-2011, 01:45 PM
i only have dreamweaver MX without using layers the photos cant go where i want them instead they automatically go and divide up the text on the page and that sucks...how can keep them where they are now without using Layers (because Layers are not consistent on other browsers).

tell me exactly how? ahhhhhhhh :(

powellcustomdrums
12-31-2011, 01:46 PM
also cant i somehow just "LOCK" the Layers down so that other Browsers can't move them around?

Ricky55
01-02-2012, 07:08 AM
As others have said layers are not ideal for positioning a whole page but there's nothing wrong with absolutely positioning certain items especially when you don't need them to be in the flow of the doc.

Ap divs just need a positioning context so they know where to take their left, top, right or bottom measurement from. If you don't set one the browser should just use the parent element and this is where your inconsistencies are coming in.

To make a parent be a positioning context you apply position: relative; then when you apply position absolute to your images they know where to be positioned from.

IMO you are best doing this in code view so you can see what's going on but you can apply the CSS rules from design view.

Bear in mind this is a sticking plaster solution, you really do need to learn more or employ the services of a pro.

So ensure each of the areas that you are positioning your images in have position relative and you should fine peace crosses browser.

If you don't come back and I'll fix it for ya.

Cheers

Ps
To sort out the loading issues, ensure your images are 72dpi and saved out for the web from a program such as photoshop. You can leave these massive images on the site.

Ricky55
01-02-2012, 07:11 AM
Sorry just read that back typing on the iPad, I obviously meant to say you can't leave those massive images on the site.

powellcustomdrums
01-02-2012, 03:12 PM
As others have said layers are not ideal for positioning a whole page but there's nothing wrong with absolutely positioning certain items especially when you don't need them to be in the flow of the doc.

Ap divs just need a positioning context so they know where to take their left, top, right or bottom measurement from. If you don't set one the browser should just use the parent element and this is where your inconsistencies are coming in.

To make a parent be a positioning context you apply position: relative; then when you apply position absolute to your images they know where to be positioned from.

IMO you are best doing this in code view so you can see what's going on but you can apply the CSS rules from design view.

Bear in mind this is a sticking plaster solution, you really do need to learn more or employ the services of a pro.

So ensure each of the areas that you are positioning your images in have position relative and you should fine peace crosses browser.

If you don't come back and I'll fix it for ya.

Cheers

Ps
To sort out the loading issues, ensure your images are 72dpi and saved out for the web from a program such as photoshop. You can leave these massive images on the site.













Thanks for the help i tried this on another page i have the same problem with and it still wont work because when i view it in Firefox it works but IE it still throws the image - (hoop image with glowing lights on it) up and the right side text paragraph down the page can you view the code and tell me whats going on and if i should apply this to the layer tables as well where text is here is the page im viewing -

http://powellcustomdrums.com/HOME-ABOUT

view it in firefox and IE you will see what i mean i want it to look like it does in Firefox so maybe you can copy the code and fix it for me and explain what you altered?

Thanks and this will make my life!!!

powellcustomdrums
01-02-2012, 03:55 PM
and possibly fix this page so all the images line up the correct way on each browser - http://powellcustomdrums.com/HOME-ORDER-FORM

DWcourse
01-02-2012, 04:18 PM
Absolute positioning does not work for what you are trying to do. To see another problem increase the text size in your browser and your design has a lot of additional issues. You need to learn to place images using within the flow of the document using CSS floats, etc.

powellcustomdrums
01-02-2012, 07:08 PM
Absolute positioning does not work for what you are trying to do. To see another problem increase the text size in your browser and your design has a lot of additional issues. You need to learn to place images using within the flow of the document using CSS floats, etc.


what another problem? what do you mean? everything else seems fine

DWcourse
01-02-2012, 07:25 PM
what another problem? what do you mean? everything else seems fine

If you zoom text only (as old folks like me sometimes do), you'll notice that all your images are out of position and the form at the bottom of the page is against a black background.

That's because your images are absolutely positioned and don't move with the copy when the type is enlarged.

Back to your original issue. Because different browsers and operating systems may display your type slightly differently, absolutely positioned images may seem to be in different locations in different browsers. Actually they are in the same position it's the type that has shifted.

Absolute positioning seems like a simple solution but, as you're finding out, it causes a lot of issues.

powellcustomdrums
01-02-2012, 07:28 PM
If you zoom text only (as old folks like me sometimes do), you'll notice that all your images are out of position and the form at the bottom of the page is against a black background.

That's because your images are absolutely positioned and don't move with the copy when the type is enlarged.

Back to your original issue. Because different browsers and operating systems may display your type slightly differently, absolutely positioned images may seem to be in different locations in different browsers. Actually they are in the same position it's the type that has shifted.

Absolute positioning seems like a simple solution but, as you're finding out, it causes a lot of issues.



oh MAN i see now i see whats happening this sucks because i don't wanna have to redo my entire site over! next time i work on a webpage i will first think whats going to work for everyone!

Ricky55
01-03-2012, 05:23 AM
Most browsers if not all support the zoom of the entire page rather than just the text. It's a fair point but this site has other aspects that won't work if you scale just the text, for example the navigation uses images.

Let us know what you decide to do, it's no more difficult to float the images but your site still won't look that great when users scale just the text.

DWcourse
01-03-2012, 05:40 AM
Most browsers if not all support the zoom of the entire page rather than just the text. It's a fair point but this site has other aspects that won't work if you scale just the text, for example the navigation uses images.

Let us know what you decide to do, it's no more difficult to float the images but your site still won't look that great when users scale just the text.

True but, if things totally fall apart with a change in text size, it's a good indication that you probably have problems. Besides, one rule of web design is that you shouldn't force your users to behave the way you want them to. You should allow them to use whatever tools the browser offers.

Ricky55
01-03-2012, 05:59 AM
I agree with you but in the in the real world this guy needs to get his site finished and he's not a web designer.

He can either learn to do things properly, fix this design so its workable or hire someone to build it for him. That's all I was asking.

To be fair many sites on the web break when you increase just the text they have to, to a certain extent, the graphics have to go somewhere but agreed you shouldn't have a mess on your hands.

Cheers

powellcustomdrums
01-12-2012, 10:07 PM
So i guess the Layout i want to do (what started this thread) can NOT BE DONE? thats STUPID! again why doesnt Dreamweaver have a option that "Locks" layers and "Text" down into your page so they dont move around?

help?

DWcourse
01-12-2012, 10:33 PM
So i guess the Layout i want to do (what started this thread) can NOT BE DONE? thats STUPID! again why doesnt Dreamweaver have a option that "Locks" layers and "Text" down into your page so they dont move around?

No, it's not stupid and it's not a problem with Dreamweaver, it's the nature of HTML and CSS. Your choices are:


Learn HTML and CSS
Hire someone to build your site for you

powellcustomdrums
01-12-2012, 11:03 PM
sorry i guess im just frustrated

powellcustomdrums
01-12-2012, 11:15 PM
ill just put a note at the top of my page that says - "Best Viewed with text set to 16"

Ricky55
01-13-2012, 01:44 AM
This is not that much of an issue in IMO and certainly not worth adding that note. Text only scaling doesn't even work in ie if you have set your font sizes in pixels. And all browsers and mobile devices have page zoom with the exception of ie6 which is dead.

Don't get me wrong accessibility is very important and ideally it's best if you're page can withstand some amount of text only scaling without breaking too badly but it's not the biggest issue facing you. Many sites on the web break a little when you use the text only zoom.

In fact having being involved in this discussion it made me question my own views on this issue as I do like to take accessibility seriously and this was the response I received on a forum I use. This forum is frequenented by many professionals and guys who's views I respect.

Read it here if youre interested.

http://forum.boagworld.com/discussion/comment/45024#Comment_45024

For now id get the images positioned drop the note and then decide whether you'd like to learn more or perhaps pay someone to build you a more flexible better constructed website.

Cheers

DWcourse
01-13-2012, 03:59 AM
This is not that much of an issue in IMO and certainly not worth adding that note.
I basically agree but he was also having a cross-browser issue with the image placement due to the text breaking differently across different browsers. Things are kind of a mess in Safari for instance.

It doesn't seem like it would be that much effort to place the images inline, float them to the right and add a clear property to paragraphs following an image.

Ricky55
01-13-2012, 07:55 AM
Yes I totally agree with you dw I think we mentioned about floating the images earlier.

Don't get me wrong I'm not suggesting that a site should fall to bits with one text scale and I know this site does have issues.

Ill try to record a short video for you Powell to show you we can get this done and get your site up and running.

Cheers