Welcome to WebmasterWorld Guest from 34.204.203.142

Forum Moderators: open

Message Too Old, No Replies

the map isn't aligning with the page

I have a table on my Contact us page

     
2:48 am on Oct 23, 2018 (gmt 0)

New User

joined:Oct 23, 2018
posts:1
votes: 0


Hey everybody!

I have a table on my Contact us page, which features a Google iframe map, contact us form and an address.

However the map isn't aligning with the page, you can see the map has around a 3 pixel space difference between it's left side and the above pictures left side alignment.

Please see: <snip> to see what I mean!

How can I align this?

Sam

P.S.
4:09 am on Oct 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Hi helenmai and welcome to WebmasterWorld [webmasterworld.com]

Try using the align attribute like this:
<iframe src="/map_example.asp" width="200" height="200" align="center">
</iframe>
Play with the align: right, center or left.

If that doesn't get you the results you're looking for, you may need to add CSS attributes to the table cell and position it that way:
<table><td><div style="position:center; overflow: auto; height: 100%;"><iframe src="/map_example.asp" width="200" height="200">
</iframe></div></td></table>


There are plenty of tutorials on CSS positioning.
10:09 am on Oct 23, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


By default, iframe has a style "display:inline;" so it can cause issue with baseline, you can change the style to "display:block;" for example.
10:18 pm on Oct 23, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there helenmai,

please note that the "align attribute" is deprecated and should never be used. :(

HTML display attributes have been removed from the markup and CSS is now,
and has been for past twenty years, the method to use. ;)

Further reading:-

MDN - Introduction to CSS [developer.mozilla.org]



birdbrain
11:09 pm on Oct 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


For the record, while the align attribute is deprecated in much of older HTML, it is supported and used widely in iframe elements. It fact it currently is used in W3 Schools tutorials: [w3schools.com...]



[fix typo]

[edited by: keyplyr at 11:42 pm (utc) on Oct 23, 2018]

11:14 pm on Oct 23, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


W3C tutorials:

"w3schools", not "W3C" (huge difference)
11:42 pm on Oct 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Thanks justpassing, typo corrected :)
12:59 pm on Oct 24, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39



quote by keyplyr

"it is supported and used widely in iframe elements.

In fact it currently is used in W3Schools tutorials"



Unfortunately many novices have been fooled into believing that
"W3Schools" is the de facto source of good coding standards.:(

Nothing could be further from the truth.

In fact, the "align attribute" is deprecated and should never be used.

Positioning of HTML elements should always be done with CSS. ;)



birdbrain
1:28 pm on Oct 24, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


At the W3Schools page it's also written in red:
Compatibility Notes:
The align attribute of <iframe> is not supported in HTML5. Use CSS instead.
:)
6:25 pm on Oct 24, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Yes, if you're writing a page in HTML5, don't use elements that aren't supported in HTML5. It may not work as intended. As I said, try using the second ( CSS) example I gave.
7:34 pm on Oct 24, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there keyplyr,
let me permanently put this issue to rest.

The align attribute's deprecation has absolutely nothing to do with HTML5.
It was deprecated before the introduction of HTML4

Take a look at this test code...




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title</title>
</head>
<body>
<h1 align="center">This is a test</h1>
</body>
</html>


Now here is the W3C Markup Validation Service report...

Error found while checking this document as HTML 4.01 Strict!

1 Error warning.

Line 9, Column 11: there is no attribute "ALIGN"

<h1 align="center">This is a test</h1> 


You have used the attribute named above in your document, but the document type
you are using does not support that attribute for this element.



birdbrain
9:52 am on Oct 25, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there helenmai,
now that your thread's aggravating distraction has been put to bed, could you please
post the complete HTML used for the iframe, contact form and address so that
members can supply the CSS to resolve your little problem. ;)


birdbrain