Highlighted

Gaps between cells when previewing in browser

New Here ,
Sep 29, 2019

Copy link to clipboard

Copied

 In dreamweaver 

33416710-38D9-45FB-AF7D-372EC5FF40F2.jpeg

 

Preview in browser

AD9F15B8-6534-4BC0-B9B6-A2CB5DD2EF39.jpeg

 

 

 

Hi all,

I am just messing about with dreamweaver (hence excuse the design) and I am not sure why this is happening, but on dreamweaver I have created a table (800w) with 3 rows. On the top row I have a banner, in the next a nav bar and the 3rd row is an editable region. But as you can see in dreamweaver there are no white gaps at the top of the banner or in between the banner and nav bar. However when previewing it on the browser there is a white gap at the top of the banner and nav bar. Not sure how to fix this, please help! 

Thanks in advance. 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

#1 Tables for layouts went out of favor in the late 1990's when CSS was introduced.  Nowadays, we use CSS Flexbox or css Grdis to align HTML elements. 

 

#2 Browsers add their own default margins and padding to all HTML elements.   One way web designers guard against browser variation is to use what's called a CSS Reset - a minified set of CSS rules that resets all styles to a consistent baseline.   See link for details.  https://cssreset.com/what-is-a-css-reset/

 

A quick & dirty way to remove margins and padding from every HTML element at once is with the wildcard selector or asterisk in your CSS code like this.

 

* {margin:0; padding:0}

 

Views

405

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Gaps between cells when previewing in browser

New Here ,
Sep 29, 2019

Copy link to clipboard

Copied

 In dreamweaver 

33416710-38D9-45FB-AF7D-372EC5FF40F2.jpeg

 

Preview in browser

AD9F15B8-6534-4BC0-B9B6-A2CB5DD2EF39.jpeg

 

 

 

Hi all,

I am just messing about with dreamweaver (hence excuse the design) and I am not sure why this is happening, but on dreamweaver I have created a table (800w) with 3 rows. On the top row I have a banner, in the next a nav bar and the 3rd row is an editable region. But as you can see in dreamweaver there are no white gaps at the top of the banner or in between the banner and nav bar. However when previewing it on the browser there is a white gap at the top of the banner and nav bar. Not sure how to fix this, please help! 

Thanks in advance. 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

#1 Tables for layouts went out of favor in the late 1990's when CSS was introduced.  Nowadays, we use CSS Flexbox or css Grdis to align HTML elements. 

 

#2 Browsers add their own default margins and padding to all HTML elements.   One way web designers guard against browser variation is to use what's called a CSS Reset - a minified set of CSS rules that resets all styles to a consistent baseline.   See link for details.  https://cssreset.com/what-is-a-css-reset/

 

A quick & dirty way to remove margins and padding from every HTML element at once is with the wildcard selector or asterisk in your CSS code like this.

 

* {margin:0; padding:0}

 

Views

406

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 29, 2019 0
Adobe Community Professional ,
Sep 29, 2019

Copy link to clipboard

Copied

#1 Tables for layouts went out of favor in the late 1990's when CSS was introduced.  Nowadays, we use CSS Flexbox or css Grdis to align HTML elements. 

 

#2 Browsers add their own default margins and padding to all HTML elements.   One way web designers guard against browser variation is to use what's called a CSS Reset - a minified set of CSS rules that resets all styles to a consistent baseline.   See link for details.  https://cssreset.com/what-is-a-css-reset/

 

A quick & dirty way to remove margins and padding from every HTML element at once is with the wildcard selector or asterisk in your CSS code like this.

 

* {margin:0; padding:0}

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2019 1
LEGEND ,
Sep 29, 2019

Copy link to clipboard

Copied

In addition to what Nancy has posted. You may also have to add some css to 'tighten' the images up within their container:

 

img {

display: block;

}

 

or

 

img {

display: inline-block;

}

 

It's better if you just target the container in which the images are inserted:

 

.yourContainerName img {

display: block;

}

 

By targeting content in a specific container you then won't run the risk of the properties being attached to other content outside of the container, which might cause undesired results.

 

BUT seriously you should NOT be using tables for your layout these days.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2019 2
New Here ,
Oct 16, 2019

Copy link to clipboard

Copied

Go to "File"

Select "Page Properites"

Select "Title/Encoding"

Change "Document Type (DTD): to "HTML 4.01 Transitional"

pagesetup.png

Select "Apply" at the bottom of the page

Select "OK"

 

That's what I did and it fixed all our problems. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 0
Adobe Community Professional ,
Oct 16, 2019

Copy link to clipboard

Copied

Nobody should be using HTML4 anymore. 

The current web standard is HTML5. 

https://www.w3schools.com/html/

 

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 0
New Here ,
Oct 16, 2019

Copy link to clipboard

Copied

Joe had a question. I had an answer. You failed to answer him in an appropriate manner to his question. What concern is it if yours? It's not as if HTML 4 has stopped working. It doesn't matter what the new standard is. I provided an answer to his question.. It's not as if everybody's needs are the same. For some, HTML 2 works just fine for their needs. The same can be said for HTML 3, 4 and 5. If you have nothing positive to contribute, then why bother responding at all. Your answer did nothing to provide a solution. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 0
Adobe Community Professional ,
Oct 16, 2019

Copy link to clipboard

Copied

Christopher, first off, thanks for your reply, this is much appreciated. The more voices chime in, the better for the community. However, in my opinion, we should not be advocating using code that has had it's time, dating back to the early part of the previous decade. We should be advocating using the very latest. Why? Because it is by the grace of the browser that HTML 4 can still be used. But for how long? The web is progressing very rapidly and with the extra benefit that we get from using HTML5/CSS3, it would be irresponsible not to use them.

 

 

Sams Teach Yourself HTML 4 in 24 Hours

by D Oliver

1999-09-17

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2019 1
Adobe Community Professional ,
Oct 17, 2019

Copy link to clipboard

Copied

"You failed to answer him in an appropriate manner."

 

I don't agree.  Using a CSS Reset is an appropriate response. But telling the OP to use an obsolete document type is not.   But the responsible & correct answer  really is "Don't use Photoshop to create HTML code."  

 

Why?  Because PS is a graphics editor, not a code generator.  The code that comes out of PS is invalid, deprecated, unstable and just plain not suitable for production purposes.

 

 

 

 

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2019 0
New Here ,
Oct 17, 2019

Copy link to clipboard

Copied

Nobody told the OP to use Photoshop to create HTML code. They asked a very speific question about tables, not about effective web-layout design/coding for the 21st century. You keep interjecting your view on modern web authoring into a conversation where they asked about how tables function. Again, your response is highly inappropriate for the question being asked. The OP did not ask "Is there a better way to do what I'm doing with this table that I created?" They asked why the table was creating a gap and how to fix it (in regards to their current application). I showed them what was causing the gap and how to resolve it. .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2019 0
Adobe Community Professional ,
Oct 17, 2019

Copy link to clipboard

Copied

All this is highly moot since the OP never responded and will probably never come back.
Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2019 0