Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 154
  • Last Modified:

Strange space issue in Chrome browser

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
skbohler
Asked:
skbohler
  • 4
  • 3
2 Solutions
 
xtermieCommented:
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
 
skbohlerAuthor Commented:
Thank you for your reply.

However, it didn't seem to fix the problem.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
skbohlerAuthor Commented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
skbohlerAuthor Commented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
skbohlerAuthor Commented:
The change to "top", fixed it!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now