Alignment of objects on Webpage
-
- Posts: 7
- Joined: December 11th, 2014, 2:40 pm
Alignment of objects on Webpage
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
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
- Posts: 127188
- Joined: September 23rd, 2004, 8:57 pm
- Location: Somewhere on the right coast
Re: Alignment of objects on Webpage
Moving to Web Development.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Alignment of objects on Webpage
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.
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 7
- Joined: December 11th, 2014, 2:40 pm
Re: Alignment of objects on Webpage
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
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
-
- Posts: 7
- Joined: December 11th, 2014, 2:40 pm
Re: Alignment of objects on Webpage
Incidentally, the map DOES line up ok with the LH Image on IE / Chrome and Opera....!! Maybe they are more tolerant?
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Alignment of objects on Webpage
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.
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- BruceAWittmeier
- Posts: 3076
- Joined: June 9th, 2008, 10:53 am
- Location: Near 37.501685 -80.147967
Re: Alignment of objects on Webpage
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.
<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
<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.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Alignment of objects on Webpage
Yes, as per:
http://www.w3schools.com/html/html_paragraphs.asp wrote: 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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 7
- Joined: December 11th, 2014, 2:40 pm
Re: Alignment of objects on Webpage
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.
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
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Alignment of objects on Webpage
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- Frenzie
- Posts: 2135
- Joined: May 5th, 2004, 10:40 am
- Location: Belgium
- Contact:
Re: Alignment of objects on Webpage
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.)
(Also, too wide for 1280 is beyond too wide.)
Intelligent alien life does exist, otherwise they would have contacted us.
- BruceAWittmeier
- Posts: 3076
- Joined: June 9th, 2008, 10:53 am
- Location: Near 37.501685 -80.147967
Re: Alignment of objects on Webpage
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.
<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.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Alignment of objects on Webpage
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 7
- Joined: December 11th, 2014, 2:40 pm
Re: Alignment of objects on Webpage
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....
see http://ux.stackexchange.com/questions/4 ... odern-lapt among other sources.
As for LH Image...yes that does stand for Left Hand Image....
-
- Posts: 52
- Joined: July 24th, 2014, 6:02 am
- Location: Australia
Re: Alignment of objects on Webpage
The extra spacing below the image / map elemet pair appears to be coming from a no-break space ( ) 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.
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.