Website scrolling horizontally for unknown reason - html

The URL: http://pipedvan.com/
The website seems to have extra spacing to the right which is causing the horizontal scrollbar to show up, I'm not sure where this problem lies but help is greatly appreciated!
PS. It is showing up in Firefox, Chrome & IE9 .. and I've only noticed it on the Home Page. Thanks!

you need to remove width: 100% on: #ddblock-custom-pager-1
div.ddblock-cycle-sardinia div.custom-pager /* on line 1076 of your style1.css*/
100% is relative to the parent container, so you move your element to the right it will blow your design up.

Related

Section becomes scrollable on Safari

I don't know why, but only on Safari a section of a webpage I am working on becomes scrollable.
It is the only section which happens and it's the only browser on which this occurs.
Can anyone help me figure this one out?
Link to the webpage, if you want to inspect the code: http://sistemecreative.ro/demo-istoma/
I decided, as a workaround, to make both the left and right divs and their wrapper the same height using a fixed value.

White Space on the right in mobile view

I need some help finding what exactly is causing the white space on the right in mobile view of my site.
http://shahil229-001-site1.smarterasp.net/
I've tried using overflow-x : hidden in the css but it stops the top navbar animations from working in the normal desktop view so thats out of the question.
Any help would be appreciated. Thanks
I found the issue! In the box where it says "SYSPRO" your link seems to be overflowing. Therefore causing it to make the page wider then it should be, and you can't see it because the link is white.
EDIT
Specifically the link http://www.syspro.com/product/what-is-erp.
EDIT 2
As Jesse Dockett said, also add width: 100% to your code. Thank You Jesse! :)

Browser compatibility issue: Throwing off layout in Firefox & IE

I am trying to figure out what keeps throwing off the positioning of my navigation menu on a site I'm working on. I have added an image just below my menu to accentuate it, which displays perfectly in Chrome.... however the div expands and locates itself below the logo in Firefox and IE. I've tried and tried and just can't seem to figure it out. If I eliminate the image it works perfectly, but with it... not so much.
Example: http://espritduvin.ca/ (View in different browsers to witness my issue)
Give your floating containers a width, e.g. 320px for the left container, 633 for the right one.
Try giving the image float:right, at the moment it's not given any css at all.
Firefox is rendering a clear on the header-right-section. Change the style for both left (logo) and right sections (nav bar) of the header to display: inline-block.
And I would suggest using Bootstrap for CSS in the future.
try to put proper width to header-right-section, i think it will work. Right now there is only float value.
If you are using bootstrap, you can put this right and left in 2 columns.

Text outside div in Safari only

I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.

Horizontal scroll bar in IE7

If you look at http://wilwaldon.com/JLS10/dine.html in IE7 (the devil) you will see a horizontal scroll bar at the bottom of your browser. I've tried to hide the overflow of pretty much every <div> and I've taken out every element in the layout one by one to see what could be causing this issue. I just can't seem to wrap my brain around it right now. Firebug isn't helping either.
Any help would be greatly appreciated:) Thanks in advance.
The problem is caused by position: absolute on #summer.