Strange margin in layout

Hi all,

I am working on a new project, but I got a strange margin in my layout (underneath the 5 buttons). It is a detail, bu it's bothering me.
See here the bug: http://www.kindergrimeren.be/shop/

I've used Firefox with the element inspector, but still haven't found what's wrong in my html or css code...

I hope somebody can help me out?

Thanks!

 

There could be any number of causes given the pointless markup you have for that menu -- you seem to have a DIV around it for nothing, a clearing DIV like it's still 2001, break tags inside it for nothing, DIV inside the anchors for NOTHING, and I'm not even convinced those span tags are needed either... or at least not for how you are using them.

Though really the whole page is a laundry list of how NOT to write the markup for a website; endless pointless DIV for nothing, endless pointless classes and ID's for nothing, endless pointless scripttardery for nothing, empty HTML 5 tags for Christmas only knows what, no media targets or sending screen only stuff to "all", gibberish use of numbered headings and/or missing headings... it's a mix of outdated/outmoded methodologies with "let's throw extra markup at EVERYTHING!"

As evidenced by it wasting 47k of markup on 1182 bytes of plaintext and less than a dozen content images. Given the simplicity of the layout and what you have so far (particularly with the "accessibility, what's that?!?" design concepts) that's anywhere from four to six times as much code as should be present in that HTML... and that's before we talk the ridiculous 24 scripts totalling nearly 500k and 30 separate CSS files coming to a massive 288k joke... resulting in a 1.3 megabyte website in 77 files that takes so long (55 seconds) to load here (almost ALL of that handshaking thanks to the ridiculous total file count) if I was visiting what you have as a USER, I'd bounce to some other website.

Which is why I'm not even sure what you're trying to accomplish, but I'd toss that ENTIRE mess in the trash to start over with semantic markup, separation of presentation from content, backing the **** away from the scripting.

What you have is ENTIRELY what I expect from some of the crappy nube-predating scam artist BS that are off the shelf solutions; like the jQuery crap, or worse, the Bootcrap -- do yourself a favor and go find a stick to scrape that off with.

Pretty much if you don't know what's wrong with this:

<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/global.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/autoload/highdpi.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/autoload/responsive-tables.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/autoload/uniform.default.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/js/jquery/plugins/fancybox/jquery.fancybox.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockbanner/blockbanner.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/product_list.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockbestsellers/blockbestsellers.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockcategories/blockcategories.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockcurrencies/blockcurrencies.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/modules/blockfacebook/css/blockfacebook.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocklanguages/blocklanguages.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockcontact/blockcontact.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockmyaccountfooter/blockmyaccount.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocknewproducts/blocknewproducts.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocknewsletter/blocknewsletter.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocksearch/blocksearch.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/js/jquery/plugins/autocomplete/jquery.autocomplete.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockspecials/blockspecials.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocktags/blocktags.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockuserinfo/blockuserinfo.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockviewed/blockviewed.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/homefeatured/homefeatured.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/modules/themeconfigurator/css/hooks.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/themes/default-bootstrap/css/modules/blockcart/blockcart.css" type="text/css" media="all" />
			<link rel="stylesheet" href="/shop/js/jquery/plugins/bxslider/jquery.bxslider.css" type="text/css" media="all" />

Code (markup):

Or even just this:

div id="search_block_top" class="col-sm-4 clearfix">

Code (markup):

... or this:

<div class="layer_cart_cart col-xs-12 col-md-6">

Code (markup):

You probably shouldn't be trying to make a website.

There is NO reason other than developer ineptitude and rubbish tools for that page to be more than around 12k of markup, with the entire site not using more than around 32k of CSS and maybe 24k of scripting (not counting social media plugins) coming to MAYBE two dozen files total. You've got three times that in file count and twenty times that in code and that's likely a hefty dose of what's biting you here.

Since as I keep telling people "frameworks" like Bootcrap or Jqueery just teach you how NOT to build a website and prevents you from learning to do even the simplest of things properly.

Of course it's Prestashop, another off the shelf solution who's front end code is a train wreck of how not to code a front end... so you've got an uphill battle from the start convincing that disaster (like pretty much every other off the shelf CMS) to do even the simplest of things properly.

Toss it and start over, I wouldn't even TRY to salvage anything from that mess. Sorry if that sounds harsh, but I figured SOMEBODY should tell you this before you keep painting yourself further and further into the corner.

 

Hi deathshadow,

I would like to say thanks for your feedback, I really appreciate it.
I know...it's Prestashop and I don't like the front end code as well. I've once build a webshop all by myself, but to be honest: it takes a lot of work and time. I've heard everyone talking good stuff about Prestashop, so that was the reason I would give it a go.
Why build your own webshop when you got already the code, right?

So do you know if there is any ecommerce software around there which gives a good front end code? Or would you say: start from scratch and build it yourself? (it isn't my main business, so that's why I prefer to use a CMS).

Thanks.

 

deathshadow is completely right: You should definitely clean up that mess. If you still think that a hotfix is the way to go, here is a CSS code that you can add to a CSS file (p.e. the blocktopmenu.css). I intentionally use the 'important' flag even if that wouldn't necessarily be needed (if it's placed in the right section). It doesn't really remove the space, it's more like covering it. I've tested this in Firefox and Chrome. Keep in mind: It's a fix and isn't a good solution at all.

#eigen_sitemenu { display: flex !important; }
#eigen_sitemenu ul { margin-bottom: 0 !important; }

Code (markup):

 

While you work on making the markup and styles into something resembling sanity, go to your global.css file and edit the vertical-align property value for the following:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;   /*make this either top or bottom --- either will work*/
}

Code (markup):

I don't know what all that will affect, given the gawd-awful css reset, so test.

cheers,

gary