Inspiring

Answered

Why Does Chrome Display My Layout Wrongly?

6 replies
1309 views
Translate

Hii everybody, does anybody know why my website layout displays wrongly in Chrome but correctly on Firefox? It’s a pretty simple layout. The Chrome display narrows the columns at the sides and widens the cells in the middle so there are spaces between the pictures. This does NOT happen in Firefox or Safari.

The layout is basically 8 columns equalling 980px width in total. 65,25,200,200,200,200,25,65. As you can see (website link below) Chrome narrows the 65px columns at the edges and widens the 200px columns in the middle for reasons I can’t work out.

http://www.maximum-robot.co.uk/

Thanks for any help.
Gareth

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OSheaCorrect answer

Community Expert

Then do yourself and your band a favor and hire an experienced web developer to help you.

Responsive web design is not optional and nothing new. It has been around since 2012. And it's NOT about building separate pages for specific devices. It's about building layouts that fit a wide range of device widths from small mobile to big screen TVs, usually with frameworks like Bootstrap.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

I'm afraid "browser variation" is the least of your worries.

The average shelf-life of a site these days is 3-5 years. Clearly your current site has far exceeded that limit and it shows. This site needs to be rebuilt to modern web standards.

Among other things, table-based layouts are NOT responsive. On hi-res displays, 980px looks like a postage stamp floating in the Atlantic ocean. And 980px doesn't fit small devices. So you're alienating users on both spectrums and all parts in between. Bad enough to be sure but Google is penalizing you for not having a "mobile-friendly" site. See report below.

https://search.google.com/test/mobile-friendly?id=rKKJUizzrTovJ2dtGrvYRQ

Misstep #2 is not having HTTPS connections. There's no excuse for not having a secure server anymore. GoDaddy offers SSL/TLS certs. Or you can get FREE low level certs from Let's Encrypt or Cloudflare and install them yourself. Secure connections are a "must have."

https://www.whynopadlock.com/results/beaab99a-fdfb-4d96-bdd4-d2b5709478b7

Start your responsive site with one of the built-in Bootstrap Starter Templates in DW CC. File > New > Starter Templates > Bootstrap Templates. Choose a layout and hit the Create button.

Read chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

- https://www.w3schools.com/bootstrap4/

Translate

Nancy O'Shea— Product User & Community Expert

Gareth_WilliamsAuthor

Inspiring

Thanks Ben & Nancy, I didn't see this until now because the reply notifiction went into my spam for some reason. I have (sort of) solved the issue by breaking the text with a paragraph. For some reason Chrome caused the text to push the cell longer. This fix wouldn't work if there was more text but as it's only two lines I can get away with it! As for the other issues I would prefer not to spend any time on these matters. Though I appreciate that it would look better on many devices if I did. Redesigning it for the latest technology would be a never ending task as devices and browsers are forever changing. I think we need to focus on the music! Thanks again for your help.

Translate

Nancy OShea

Correct answer

Community Expert

Then do yourself and your band a favor and hire an experienced web developer to help you.

Responsive web design is not optional and nothing new. It has been around since 2012. And it's NOT about building separate pages for specific devices. It's about building layouts that fit a wide range of device widths from small mobile to big screen TVs, usually with frameworks like Bootstrap.

Translate

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

Try adding reset.css to your page: https://meyerweb.com/eric/tools/css/reset/

Having said that, tables are for tabular data, not for layouts.

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.