MozillaZine

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

Post Posted December 11th, 2014, 2:44 pm

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

DanRaisch
Moderator

User avatar
 
Posts: 121619
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted December 11th, 2014, 2:47 pm

Moving to Web Development.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 11th, 2014, 3:09 pm

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

Post Posted December 12th, 2014, 2:19 am

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

Post Posted December 12th, 2014, 2:35 am

Incidentally, the map DOES line up ok with the LH Image on IE / Chrome and Opera....!! Maybe they are more tolerant?

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 12th, 2014, 3:37 am

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/

BruceAWittmeier

User avatar
 
Posts: 2634
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted December 12th, 2014, 6:04 am

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'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 12th, 2014, 8:22 am

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

Post Posted December 12th, 2014, 9:10 am

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.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 12th, 2014, 9:53 am

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/

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted December 12th, 2014, 12:25 pm

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.

BruceAWittmeier

User avatar
 
Posts: 2634
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted December 12th, 2014, 12:34 pm

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'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted December 12th, 2014, 12:47 pm

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

Post Posted December 12th, 2014, 1:36 pm

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

Post Posted December 12th, 2014, 2:27 pm

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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest