I tested my site whilst building through the 5 major browsers those being: FF/IE/Chrome/Opera and Safari, all of which are the latest versions, and my site rendered without any breaks and still does render ok across all 5 browsers offline, but some unexplained reason Im yet to pin down why the site design completely breaks apart but only in Safari (Im running everything off Windows).
The break in question is the first block of text partnered with its portfolio image, they shoot off-left where the same code has been used on the 3rd portfolio paring of text/portfolio image and that renders ok…
The domain in question is: www.bfdesigns.co.uk
To make matters more confusing, the HUGE break in page design seems to be intermitent, Ive never had an issue like this before and I feel I have exhausted all options to try and find out why this is happening.
If anyone wants to take a look at the site / code then please feel free to do so , I will be most appreciative of any help offered
p.s Apologies if this is in the wrong forum, I was unsure where to post such an issue.
The problem is caused by the two consecutive comments below. It’s safest to keep comments separated by tags i.e. place the comment indicating the close of the div before the </div> tag rather than after.
</div><!--company WrapAroundImgRight end--><!--<img src="images/spacer.png" alt="dscscdsc" class="spacedOut"/>
<div class="company leftWrapAround"> <div class="portfolioIMG leftImg"> <a href="#"><img src="images/companyfour.png" alt="some poor image" title="Lorem ipsum dolor sit amet, consectetur adipisicing"/></a> </div> <h2 class="company nameLeft">Watch this space</h2> <p><strong>Client information:</strong><br /> Watch this space.</p> <p><strong>Client brief:</strong><br /> Watch this space</p> <p><strong>Technologies used:</strong><br /> Notepad++,XHTML,CSS/CSS3,Jquery,Javascript,Flash,Photoshop,Illustrator.</p> <a href="#" target="_blank" class="viewSiteRight"><span>View the site:</span> <br /> <br /> Watch this space</a></div>company leftWrapAround ends-->
Hi Victorinox,
Thankyou for taking the time to look at the source code and I do greatly appreciate your reply.
What I have done is, rather than edit those comment tags you mentioned, I just completely removed the whole commented out section as it wasnt really needed in there, but the problem still exists unfortunately, so any other ideas would be more than welcome.
Problem 99% fixed,
It was a mix of using oveflow:hidden which messed the layout up, so I switched a couple of div tags to float:left and the design area that was completely breaking breaks no more, unless you zoom right out in safari…Which I can kind live with for the moment, but will look at even rectifying this…