Alignment of objects on Webpage

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
gprit
Posts: 7
Joined: December 11th, 2014, 2:40 pm

Alignment of objects on Webpage

Post by gprit »

http://www.libertybs.co.uk/clients/theruperraarms

If you look at the LOCATION page, the google map (imbedded ode) is out of alignment with the LH image.

It lines up perfectly on IE/Google Chrome/Opera.

What is the problem causing this in Firefox (latest v34.01 installed but was also the same in v33)

thanks
User avatar
DanRaisch
Moderator
Posts: 127188
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Alignment of objects on Webpage

Post by DanRaisch »

Moving to Web Development.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Alignment of objects on Webpage

Post by patrickjdempsey »

Probably the fact that it's contained inside of a <P> paragraph element. The paragraph element is specifically for a block of text that has a vertical space between it and another block of text:

http://www.w3schools.com/html/html_paragraphs.asp

It took me a little while to even find the "Location" link because this website is formatted for extra wide monitors which is really not a recommended way to design a site.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
gprit
Posts: 7
Joined: December 11th, 2014, 2:40 pm

Re: Alignment of objects on Webpage

Post by gprit »

Thanks for the pointer....NOF automatically applies the <p>. Can I ask what it should be embedded inside?

As for the finding the Location tab....it seems to show fine on a standard 1366 PC screen, but I will have another look into it.
thanks
gprit
Posts: 7
Joined: December 11th, 2014, 2:40 pm

Re: Alignment of objects on Webpage

Post by gprit »

Incidentally, the map DOES line up ok with the LH Image on IE / Chrome and Opera....!! Maybe they are more tolerant?
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Alignment of objects on Webpage

Post by patrickjdempsey »

Generally speaking, Firefox is the most "strict" when it comes to stuff like this. Opera used to be similarly strict back when they used Presto. Now-days Chrome/Opera/Safari should pretty much all look very close since they use the same basic renderer. And Chrome tends to follow IE's behavior on all kinds of things, which is good for end users but IMO bad for the standards.

I don't think you have to embed it in any specific element. Change the <p> to a <div> and it should work fine. WYSIWYG editors are notorious for doing goofy stuff like that.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Alignment of objects on Webpage

Post by BruceAWittmeier »

It appears to be caused by a javascript routine container. If you put it in a <Div> </Div> rather than a <p> </p> it seems to work. If I recall a <p> automatically provides a carriage return/line feed or <br> by default.

Image

<Div><script type="text/javascript" src="Location_files/js"></script><script src="Location_files/main.js"></script></Div>

I did not alter the images so they appear missing.
http://gotnarcosis.com/brucewittmeier/t ... onDiv.html
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Alignment of objects on Webpage

Post by patrickjdempsey »

Yes, as per:

http://www.w3schools.com/html/html_paragraphs.asp wrote: :idea: Browsers automatically add an empty line before and after a paragraph.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
gprit
Posts: 7
Joined: December 11th, 2014, 2:40 pm

Re: Alignment of objects on Webpage

Post by gprit »

Thanks all....it has solved the misalignment above the map, although it still is forcing a line space BELOW the map, as indeed it is BELOW the insertion of Galleries on other pages.
I think it is a limitation on how the website software works as I have not been able to remove the <p> as this is automatically done by the software (Net Objects Fusion) when I insert code on a page. I'll keep plugging away to see if I can get it to do this.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Alignment of objects on Webpage

Post by patrickjdempsey »

Well, you could try to use CSS to kill the formatting, although this may impact layout in other places if you expect to see paragraphs...

Code: Select all

p { 
  margin-top:0px!important;
  margin-bottom:0px!important;
}
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
Frenzie
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium
Contact:

Re: Alignment of objects on Webpage

Post by Frenzie »

I don't see any significant difference between Iceweasel 31 and other browsers, except for a slight difference in padding or margin at the bottom. Also I have no idea what an "LH image" is, but since the boys on the left of the map seem to be the only thing that could be out of alignment I guess that's it.

(Also, too wide for 1280 is beyond too wide.)
Intelligent alien life does exist, otherwise they would have contacted us.
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Alignment of objects on Webpage

Post by BruceAWittmeier »

Yes, the table is a little big...1315px wide.
<table border="0" cellspacing="0" cellpadding="0" width="1315">

I assume the LH Image is the left-hand of the two.
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Alignment of objects on Webpage

Post by patrickjdempsey »

Frenzie, gprit has updated the code. And yes, the whole website is way too wide. Anything beyond 1000px wide is just going to upset users.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
gprit
Posts: 7
Joined: December 11th, 2014, 2:40 pm

Re: Alignment of objects on Webpage

Post by gprit »

Probably straying off beam here....but 1366 is the most popular screen width...
see http://ux.stackexchange.com/questions/4 ... odern-lapt among other sources.

As for LH Image...yes that does stand for Left Hand Image....
Dom1953
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Re: Alignment of objects on Webpage

Post by Dom1953 »

The extra spacing below the image / map elemet pair appears to be coming from a no-break space (&nbsp;) character appearing between the map element and end of table data tag, </td>. Removing this from a locally saved copy removed the separation between the map and following content.

FWIW, note also <p> elements do not contain block elements and have optional end tags. So the DIV tag for the map is terminating the P tag immediately preceding. The closing </p> tag after the no-break space is bad HTML.
Post Reply