Solved

Strange space issue in Chrome browser

Posted on 2016-08-31
8
73 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 17

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 21

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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 21

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 21

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
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.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

705 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now