cancel
Showing results for 
Search instead for 
Did you mean: 

html5/css layout issues

FIXED
chenks76
All Star
Posts: 3,274
Thanks: 338
Fixes: 12
Registered: ‎24-10-2013

html5/css layout issues

got a strange problem.
got a page with 3 rows of 3 icons, set out using divs and css.

on every browser i've tested (firefox, opera, edge, IE11) it looks fine, however when i view it on chrome the layout is skewed.

 


all browsers apart from chrome
firefox.JPG

chrome
chrome.JPG

now, i'm sure there is something obvious that is causing this, but can't quite spot it myself.
the code should be html5 compliant already (it seems to pass all the relevant checks).

 

html code

<!DOCTYPE html>

<html>

<head>
	<title>Test</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="default.css"/>
</head>

<body>

<br/><br/>

<div class="content">
	<br/><br/>
	<img src="headerlogo.jpg" alt="">
	<br/>
	<h1>TEST</h1>

	<br/>

	<div class="mainmenu">

		<div class="column-left">
			<a href="link1.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 1</h3>
		</div>
		
		<div class="column-center">
			<a href="link2.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 2</h3>
		</div>
		
		<div class="column-right">
			<a href="link3.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 3</h3>
		</div>
		
		<div class="column-left">
			<a href="link4.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 4</h3>
		</div>
		
		<div class="column-center">
			<a href="link5.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 5</h3>	
		</div>
		
		<div class="column-right">
			<a href="link6.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 6</h3>
		</div>
		
		<div class="column-left">
			<a href="link7.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 7</h3>	
		</div>
		
		<div class="column-center">
			<a href="link8.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 8</h3>		
		</div>
		
		<div class="column-right">
			<a href="link9.htm"><img class="menubuttons" src="icon.png" alt=""></a>
			<h3>LINK 9</h3>	
		</div>
	
	</div>

</div>

<br/><br/><br/><br/><br/>

</body>
</html>

css

body {margin:0;padding: 0;font-family: Arial, Helvetica, sans-serif;font-size: 80%;}

h1 {text-align: center;font-size: 350%;}
h2 {text-align: center;font-size: 250%;}
h3 {text-align: center;font-size: 200%;}
h4 {text-align: center;font-size: 150%;margin: 0px;padding: 0px;}
h5 {text-align: center;font-size: 300%;margin: 0px;padding: 0px;}

a {text-decoration: none;color: #000000;}
a:hover {text-decoration: underline;color: #000000;}
a.logout {text-decoration: none;color: #0000FF;}
a:hover.logout {text-decoration: underline;color: #0000FF;}

.content {clear: both;text-align: center;}

#parts {text-align: center;font-size: 200%;}
#labour {text-align: center;font-size: 200%;}
#grand_total {text-align: center;font-size: 200%;}
#ber_total {text-align: center;font-size: 200%;}
#result {text-align: center;font-size: 250%;}
#partcost1 {text-align: center;font-size: 200%;}
#partcost2 {text-align: center;font-size: 200%;}
#labourcost {text-align: center;font-size: 200%;}
#totalexvat {text-align: center;font-size: 200%;}
#totalvat {text-align: center;font-size: 250%;}

.mainmenu {width: 900px;margin: 0 auto;}
.column-left {float: left; width: 33%; margin-bottom: 30px;}
.column-right {float: right; width: 33%; margin-bottom: 30px;}
.column-center {display: inline-block; width: 33%; margin-bottom: 30px;}

.calculators {width: 700px;margin: 0 auto;}
.columnleft {float: left; width: 50%; margin-bottom: 30px;}
.columnright {float: right; width: 50%; margin-bottom: 30px;}

#loginsubmit {
    font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	width: 350px;
	height: 80px;
	font-size: 35px;
	border: 3px solid #000;
	background-color: #e0e0e0;
}

#loginsubmit:hover {cursor: pointer;}

input {text-align: center;font-size: 40px;}
img.menubuttons {border:2px solid #000;}

.BackButtonsTable {border: 0px solid black;margin: auto;border-collapse: collapse;width: 600px;}
.BackButtonsTable tr {border: 0px solid black;}
.BackButtonsTable td {border: 0px solid black;font-family: Arial, Helvetica, sans-serif;font-size: 320%;padding: 20px;}
.BackButtonsTable th {border: 0px solid black;}
.BackButtonsTable thead {background-color: #4f81bd;padding: 2;margin: 1;color: #fff;font-weight: bold;}

.BerCalcTable {border: 2px solid black;margin: auto;border-collapse: collapse;width: 600px;}
.BerCalcTable tr {border: 0px solid black;}
.BerCalcTable td {border: 0px solid black;font-family: Arial, Helvetica, sans-serif;font-size: 320%;padding: 20px;}
.BerCalcTable th {border: 0px solid black;}
.BerCalcTable thead {background-color: #4f81bd;padding: 2;margin: 1;color: #fff;font-weight: bold;}
.BerCalcTableCol1 {width:100px;}
.BerCalcTableCol2 {width:500px;}

.TimesheetTable {border: 2px solid black;margin: auto;border-collapse: collapse;width: 90%;}
.TimesheetTable tr {border: 2px solid black;}
.TimesheetTable td {border: 2px solid black;background-color: #FFFFFF;font-size: 25px;height:70px;}
.TimesheetTable th {border: 2px solid black;background-color: #E1E1E1;font-size: 25px;height:70px;}
.TimesheetTableCol1 {width:28%;}
.TimesheetTableCol2 {width:12%;}
.TimesheetTableCol3 {width:12%;}
.TimesheetTableCol4 {width:12%;}
.TimesheetTableCol5 {width:12%;}
.TimesheetTableCol6 {width:12%;}
.TimesheetTableCol7 {width:12%;}

.bermenudrop {font-size: 30px;font-family: sans-serif;border: 2px solid black;width: 350px;height: 50px;}
.connectmenudrop {font-size: 27px;font-family: sans-serif;border: 2px solid black;width: 450px;height: 50px;text-align: center;}
10 REPLIES 10
Anonymous
Not applicable

Re: html5/css layout issues

Try wrapping each group (row) of left, center and right in its own div tag.

<div>
	<div class="column-left">
		<a href="link1.htm"><img class="menubuttons" src="icon.png" alt=""></a>
		<h3>LINK 1</h3>
	</div>		
	<div class="column-center">
		<a href="link2.htm"><img class="menubuttons" src="icon.png" alt=""></a>
		<h3>LINK 2</h3>
	</div>
	<div class="column-right">
		<a href="link3.htm"><img class="menubuttons" src="icon.png" alt=""></a>
		<h3>LINK 3</h3>
	</div>
</div>
jaread83
Community Gaffer
Community Gaffer
Posts: 3,438
Thanks: 2,336
Fixes: 81
Registered: ‎22-02-2016

Re: html5/css layout issues

Chrome has an inherent problem with sub pixel rounding. What I mean by that is that it tries to round the percentage width up to the nearest pixel and it will sometimes break the layout.

Have you tried using a common CSS class for each box and then using the nth child to push the 4th one to the next row?

Something like.....

.commonclass{
    width:33%;
    margin: 0 0.3333% 30px 0;
    display: inline-block;
    float: left;
}

.commonclass::nth-child(3n) {
    margin-right: 0;
    clear: both;
}

With the width being 33% and requiring a little bit of space between each other at 0.3333% margin on the right on the first and second items, this should give it a little tiny bit of breathing room on Chrome.

I have created a jsfiddle here:

https://jsfiddle.net/7w8e31f7/

Some more info about the sub pixel rounding bug can be found here:

http://stackoverflow.com/questions/9635347/fixing-sub-pixel-rounding-issue-in-a-css-fluid-grid

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

chenks76
All Star
Posts: 3,274
Thanks: 338
Fixes: 12
Registered: ‎24-10-2013

Re: html5/css layout issues


@Anonymous wrote:

Try wrapping each group (row) of left, center and right in its own div tag.



yes, that makes no difference unfortunately.

chenks76
All Star
Posts: 3,274
Thanks: 338
Fixes: 12
Registered: ‎24-10-2013

Re: html5/css layout issues


@jaread83 wrote:

Chrome has an inherent problem with sub pixel rounding. What I mean by that is that it tries to round the percentage width up to the nearest pixel and it will sometimes break the layout.

Have you tried using a common CSS class for each box and then using the nth child to push the 4th one to the next row?


i'll take a look at this.

of course, if there is a better way of doing this then i'm all ears.
this was just the "easiest" way i could think of to get the desired layout i needed.

jaread83
Community Gaffer
Community Gaffer
Posts: 3,438
Thanks: 2,336
Fixes: 81
Registered: ‎22-02-2016

Re: html5/css layout issues

Let me try plugging your code into a jsfiddle and see if I can come up with something....

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

jaread83
Community Gaffer
Community Gaffer
Posts: 3,438
Thanks: 2,336
Fixes: 81
Registered: ‎22-02-2016

Re: html5/css layout issues

Fix

Here you go:

https://jsfiddle.net/et6t20qj/

Just tried in Chrome and it shows up as a 3x3 grid without pushing any items down.

Be aware that if you're developing this for mobile screens too you will need to add a media query to sort the layout for mobile

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

chenks76
All Star
Posts: 3,274
Thanks: 338
Fixes: 12
Registered: ‎24-10-2013

Re: html5/css layout issues

well remote users will be accessing it on a tablet using firefox - who are the primary users really.
non-remote users on a desktop using chrome.

as it stands before any changes, there are no problems on firefox on tablet.
the main div is set to 900px wide primarily to suit that tablet screen.
jaread83
Community Gaffer
Community Gaffer
Posts: 3,438
Thanks: 2,336
Fixes: 81
Registered: ‎22-02-2016

Re: html5/css layout issues

If your primary users are using a tablet, it might be worth adding a bit of CSS to make the container div switch over to 100% width rather than 900px when the screen size gets too small. Tablets tend to come in all shapes and sizes these days and if you switch it to a 100% width, it would avoid horizontal scrolling when it can't fit the screen. Another consideration would be to compact the buttons into a 2 per row configuration and override the nth child selector so it targets the 2nd item instead for small screens.

Just my 2 pence but if it works anyway, then thats all good.

If you want an easy way to test different screen sizes, try this browser tool (I have been using this for about 8 years now):

http://lab.maltewassermann.com/viewport-resizer/

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

chenks76
All Star
Posts: 3,274
Thanks: 338
Fixes: 12
Registered: ‎24-10-2013

Re: html5/css layout issues

i'm essentially teaching myself (or trying to) best practice html5/css.
previous pages have been knocked together that "worked" but didn't lend themselves to multi device support (looked good on a PC, weren't ideal on a mobile device).

all the previous stuff i've done the styling has been hard coded into the actual page and now i'm pushing towards everything in CSS.
jaread83
Community Gaffer
Community Gaffer
Posts: 3,438
Thanks: 2,336
Fixes: 81
Registered: ‎22-02-2016

Re: html5/css layout issues

Good on you for teaching yourself this kind of stuff Smiley I have been doing web dev professionally since 2008 and dabbled in it since 1999.

I hope you don't mind but I do have a few pointers about your current CSS that you posted above that you might find useful. Seeing as you're teaching yourself and would like to know some good practices, I think I got a few you will find useful that you could integrate into your projects.

I see you set your body text size to 80% and the headers to 300%, 250% etc etc. Best practice CSS with font sizes should be that you would set the body to a percentage value that would equate to a whole number in PX. 100% body font size becomes 16px font size for all unstyled elements which is standard for all browsers. All other font sizes will be inherited from the body and you should set the font sizes of other elements relative to the body and it should become a whole number. To do this you need to use a little bit of math (best to use a calculator on your computer) and set the font size of individual elements using 'em' values (percentage also works with 1em being the same as 100%).

Here is the equation which I have used for many years -

target / context = final em value

So this is what you would do.

Set the body font size to be what you would want ALL unstyled elements to be. For me, 14px on the body CSS is the norm. You would set this as

body{
    font-size: 87.5%; // this is 14px
}

That is worked out by taking the target (14) divided by the context (16 which is the default 100% body font size) and it equals 0.875 (this is the 'em' value). You then convert it to a percentage (remember that 100% = 1em).

So now body has been set to 14px, you can then move on to the other elements.

Generally, I would have a designer create those assets for me with proper font sizes and a style guide to follow but its not too hard to do this yourself.

So for each element, you can base the font sizes relative to the body font size. For example, I want my H1 tags to be... 24px in font size. To do this, we take the target (24), divide it by the context (14 which was set on the body) and then we get the em value out of that equation (1.71428571428571em). The numbers normally look like that but you can round it up and down to the nearest 3rd or 4th decimal. So in this example, the H1 would be styled like this:

h1{
    font-size: 1.71428571428571em; // this is 24px
}

You can also do this with the 'line-height' property which is similar but you would base the context part off the font-size of the thing you are styling rather than the body. There is a bit of discussion surrounding the use of REM vs EM but I work with the following and not too sure on the merits of using REM.

Something else I have found extremely useful is using a 'reset' CSS and also using the box-sizing: border-box; CSS.

The reset CSS is a bunch of styles that essentially reset all styles that are standard in a browser and makes it consistent for all browsers by resetting a bunch of CSS styles (like the margin on paragraphs, headers etc). It gives you a solid foundation to work with and will squash any CSS bugs in other browsers later on. It's just a matter of copy/pasting the CSS and including it at the top of the stylesheet. You can find it here:

http://meyerweb.com/eric/tools/css/reset/

The box-sizing: border-box; CSS is also a fairly recent innovation which does away with having to calculate how much space you have left on your page when using margins, padding, borders, widths and heights. In the past, you'd need to take the width of the parent container and make sure your padding, margins, borders and widths of the child elements never exceeded the parent container width. With the box-sizing CSS, you no longer need to do this and it will releive you of a lot of time developing a site. Simply add this to the top of the CSS file:

* {
    box-sizing: border-box;
}

I have just rambled on a bit but I hope you find this info useful! Please do give me a shout if you would like to know anything about CSS, Javascript, HTML and web development in general. Its kinda my thing Smiley

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Tags (1)