Member Avatar for GrahamN

Hi, everyone,
I'm pretty new at web design, so I'm hoping someone could help me. I've written my website, it's up and running, but I've run into this problem: In Explorer, it displays fine, but in Google Chrome, some problems become apparent.
Here's a typical page:

I'd be most grateful if someone could shed some light so that I might fix this.
Many thanks,
Graham

  • 3 Contributors
  • 4 Replies
  • 102 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Different browsers recover from bad markup in different ways. Older Internet Explorer builds are often forgiving and will "fix" broken HTML, while Chrome/Blink tends to show the actual layout consequences of mis-nested or missing tags. When a page looks fine in IE but breaks in Chrome, start by assuming the problem is malformed HTML or brittle layout choices rather than a browser bug.
(Background on how modes work: https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_mode_and_standards_mode)

Practical steps that produce quick wins: run a validator (for example, https://validator.nu/) and treat the first few errors as highest priority — early parse errors frequently cascade into many later issues. Use Chrome DevTools (https://developer.chrome.com/docs/devtools/) to inspect the live DOM, check computed widths/margins, and temporarily visualize boxes (add an outline in the inspector) to find the element causing collapse or overflow.

Fixes that make layouts consistent across engines: ensure a valid DOCTYPE to trigger standards mode, move inline styles into a stylesheet, avoid fixed-pixel layout for containers (prefer percent, max-width or responsive units), and migrate table-based layout to CSS layout techniques (flexbox/grid) where possible. A normalization stylesheet like Normalize.css can also reduce small cross‑browser differences: https://necolas.github.io/normalize.css/

Summary checklist: validate HTML, fix topmost structural errors, inspect problem areas in DevTools, then refactor CSS (externalize styles, avoid rigid pixel widths, replace layout tables). 's validator-first advice is exactly the right approach; 's levity is noted. For , starting with the validator and the inspector will show the smallest set of concrete fixes that restore consistent rendering.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

read any of the threads, Tables Vs CSS
tables do not display well anywhere
fixed pixel sizes do not display well anywhere
inline styles do not display well anywhere,

the code is out of whack, start and end tags are misaligned
You have a lone </td> outside of the <tbody>, not in a <tr>
for a code compliant browser that will cause problems
html errors will put browsers into quirks mode, which is different for every browser, and may caus the page to fail in spectacular fashion

<tag1><tag2></tag1></tag2> does not work
<tag1><tag2></tag2></tag1> is required
try to get the inline styles into the external stylesheet that is already being used, 1 style declared once is much smaller than 1 style for each tag, so much faster, easier to correct

http://validator.w3.org/check?uri=http%3A%2F%www.amber-instruments.co.uk&charset=%28detect+automatically%29&doctype=Inline&group=0 html check

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.amber-instruments.co.uk&profile=css21&usermedium=all&warning=1&lang=en CSS check

try these code checkers

Edited by almostbob because: n/a
Member Avatar for Member #120589

AB - you managed to do all that without using expletives. Better man than me.

Member Avatar for GrahamN

read any of the threads, Tables Vs CSS
tables do not display well anywhere
fixed pixel sizes do not display well anywhere
inline styles do not display well anywhere,

the code is out of whack, start and end tags are misaligned
You have a lone </td> outside of the <tbody>, not in a <tr>
for a code compliant browser that will cause problems
html errors will put browsers into quirks mode, which is different for every browser, and may caus the page to fail in spectacular fashion

<tag1><tag2></tag1></tag2> does not work
<tag1><tag2></tag2></tag1> is required
try to get the inline styles into the external stylesheet that is already being used, 1 style declared once is much smaller than 1 style for each tag, so much faster, easier to correct

http://validator.w3.org/check?uri=http%3A%2F%www.amber-instruments.co.uk&charset=%28detect+automatically%29&doctype=Inline&group=0 html check

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.amber-instruments.co.uk&profile=css21&usermedium=all&warning=1&lang=en CSS check

try these code checkers

HI,
Thank you so much for taking the time to browse over the page, and replying, I do appreciate it.
As you can probably see, I'm a bit of newbie at web design; I've got the basics under my belt (I think!) but need experience, and some help from others.
I'll take your advice and read through the associated threads, and go over the code with a fine-toothed comb.
Many thanks once again, I'm very grateful.
Graham

Member Avatar for almostbob

too easy, , ,
the w3c code validators provide more than a list of errors, they provide a list of suggested corrections
work through top to bottom
often there are half as many errors as it seems
html is linear everything is handled in the order it is typed in

If you fix an error on line 1 that is the cause of an error on line 99, the error on line 99 goes away too

its definitely not the worst code, there have been problems that just display blank screens, in everything


hands up everyone who has done that
(no hands but mine?? you are all lying HA HA HA)

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.