Emergency Layout Error

Hello,

I’ve got my site up, and a user posted a listing, but my layout isn’t working as I suspected. You can check the listing at: http://www.frontpageads.ca/listing.php?token=a85b0ab84c9e8089476b9375&xtoken=ad6d9edcb6f0d3f0b5fa820e15081df9

It’s a two column Bootstrap layout. In one column is the listing, and in another is the share buttons and flag, and tags. The listing column is 9 and the share column is 3. You can check the classes via view source… but there is a pull, and a right class. The share boxes have a pull and a right class attached to them.

Here is some style:

.pull{
	
	border:1px solid lightgrey;
	padding:1em;
}

div.pull:after
{
	 visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
}
.pull-header{
	
	font-size:1em;
	text-align:center;
	
}

.right{
	
	margin-top:2.8em !important;
	float:right;
	width:100%;
	
}

.right-header{
	
	font-size:1em; 
	text-align:center;
	
}

.popular-tag{
	
	margin-bottom:1em;
    margin-right:5px;
	display:inline-block;
	
}

.popular-tag a {
	
	color:white !important;
	
}

Thanks for any help on this.

Hi frontpageads,

Sorry, but could you clarify the problem? I’m viewing the link you posted, and the two columns appear side-by-side as expected with the boxes in the right-hand column stacking correctly and aligning correctly.

Shoot. Firefox is showing properly, do you have chrome?

I’m viewing in Firefox, Chrome and IE11. In each browser I’m seeing this:

Is this not correct?

Wierd. This is what I get in Chrome. Everything is dropped down below the first column. I have no idea why, but in Firefox it looks fine…

Without seeing a live version it’s difficult to assess entirely correctly, however it does look like the column left and right padding is pushing the right column underneath its left-hand counterpart. Except, the Bootstrap grid system wouldn’t produce this error ordinarily unless it’s been tweaked, it’s fluid and 100% functional out of the box.

Strange. I only though that borders and margins would effect this. Padding causes layouts to break as well?

Not sure what you mean by resolution, if you mean my normal screen it’s: 1366x768. Just a standard laptop. Also my zoom in Chrome is defaulted to 100%.

Without a valid doctype, all bets are off.

Not sure where my post went, seems to have disappeared, but I corrected myself saying that the padding is fine due to the box-sizing property.

But anyway, sorry - I can’t help much without seeing the issue. I can lend a piece of advice though - having the submit button the same style as the fields isn’t fantastic or UX. Just a tip!

I know. I started coding the site without a !doctype. Very bad mistake. When I tried to add one in later my layout got weird. Instead of trying to fix the errors I left it out. I suppose I should add that in?

I suppose!

1 Like

Thanks, I’ll try making the button blue or something. Will btn classes effect submit buttons? btn btn-primary?

Lol, thanks. I just have to fix those stupid errors afterwards. I’ll do that on the side.

Thanks for the help guys, I appreciate it.

You underestimate the problems with poorly formed HTML.

The CSS cannot be expected to behave consistently across a variety of browsers if the HTML is not properly formed. This includes a valid doctype, matched tags (open and close), etc. Nowadays, browsers “forgive” a wide range of HTML errors, but that “forgiveness” is browser dependent, not uniform across all browsers. A solidly written page does not count on browsers to forgive poor code.

All of this is saying, fix the HTML errors first - that’s part of proper planning and coding - then you can fix the cross browser issues confidently. Otherwise, we would be using our time to create bandaids that may break when the HTML is corrected. You shouldn’t ask anyone to waste their time to compensate for your poor planning. Besides, if the bandaids seem to work, what incentive would you have to actually repair the HTML?

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.