Solved

Strange space issue in Chrome browser

Posted on 2016-08-31
8
114 Views
Last Modified: 2016-09-06
Hello,

We have a long-running site and I just started using Chrome and noticed that there were some spaces between table cells that does not appear in other browsers.

I've attached a screenshot of the toolbar showing the spaces and I've also attached the HTML (removed some of the javascript).

Can anyone tell me what is causing these vertical spaces and how to fix?

Thanks in advance!
htmltoolbar.txt
Capture.JPG
0
Comment
Question by:skbohler
  • 4
  • 3
8 Comments
 
LVL 18

Expert Comment

by:xtermie
ID: 41778208
Can you post the HTML code so we can try it?

I would propose that you add a css reset to the top of your website style sheet, as different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak.. Use the Universal Selector  instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers
* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Open in new window

0
 

Author Comment

by:skbohler
ID: 41778397
Thank you for your reply.

However, it didn't seem to fix the problem.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41779208
It appears that this document predates the doctype declaration and contains no CSS. Or did you fail to include the css links from the head of the complete document?

Also, did you accidentally omit the first character of the HTML source code? Your attached HTML source code begins with...
html>

Open in new window

instead of
<html>

Open in new window

It is possible that this code was written for an early version of IE. Please post a link to the live document so we can see what it looks like in other compliant browsers such as Firefox or Safari. Attaching the HTML source code doesn't help much unless you attach all the linked images and remote CSS and javascript documents too.
1
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 

Author Comment

by:skbohler
ID: 41779883
The page I took a screenshot of was behind a login page.

But, you can see similar line spaces at this page: https://dev.goebase.com
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41780980
This is remarkable. I've been doing this a long time and this is the first page I've ever seen with absolutely no style mark-up. I mean no disrespect. This was very common in the early days of HTML but I have never encountered a page like this until now.

Without any style mark-up, the page is totally dependent on browser default styles. Unfortunately, they have some minor inconsistencies. The best way to avoid those inconsistencies is to set some basic defaults within the page with a CSS reset. Here's a very good article on CSS reset by a renowned CSS expert. If you are familiar with CSS at all, you should be able to apply these with little effort. If you need any help implementing this CSS reset, just let us know.
0
 

Author Comment

by:skbohler
ID: 41786317
Yeah, the page was written back in 1999!

Now, I downloaded the CSS reset and included it in the file. However, it completely broke the layout of everything on the page. Possibly that was expected and that I was supposed to remove non-CSS formatting to have it work right, but not sure how to do that yet.
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 500 total points
ID: 41786341
That means the code was written to exploit the default conditions of a particular browser and is dependent on that browser. In order to view correctly in other browsers, it will have to be completely recreated to include its own defaults which mimic those in the intended browser.

This is beyond the scope of this forum. I would suggest an EE Gig, but I see you are not accepting such suggestions.

Try chainging the vertical-align: baseline; specification on line 27 of your CSS file to vertical-align: top; and see if that works. Beyond that, I suggest reworking the document to today's standards.
0
 

Author Comment

by:skbohler
ID: 41786345
The change to "top", fixed it!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question