Browser Compatibility ??

K

kyle3728

New Member
Hello. New to the site here. Having some real stress on the website I am building. I have been using Chrome to view it and a coworker happen to view it on Firefox and on the Gallery pages the links are all screwed up. Jumps all over the place when you try and click on them. IE is the same situation. If anyone would look over my code or have any advice for me I would sure appreciate it! Thanks. Here is the address:

www.countrysidecabinetshop.net
 
Phreaddee

Phreaddee

Super Moderator
Staff member
a good start would be to built your menu in an ul rather than inside a <p> for each item. beyond that does it really benefit anyone to have those menu items as images? no not really.

And it really pains me to have to continually harp on about this, but scripts and css don't need to be littered throughout the markup. tidy it up.

Spry? ditch it.

I'm not sure what template your working from but EVERY time I've seen this comment...
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math".
Click to expand...
(and I've seen it a bit), it makes my heart sink. "box model math" is web design 101, learn it. ditch the template, and write your own code. You would be surprised how easy it actually is.

and when you make it from scratch yourself, you know whats going on.

and whats going on with those borders? there part of the image and they still don't make any sense.

your design already looks about 20 years old.

position absolute on your container? god help us.

apologies if you think I'm being an arse, I'm not. I'm just pointing out your sites deficiencies. don't take it personally, just fix it, and learn and get better.
 
K

kyle3728

New Member
Thanks! That is just what I am looking for! BTW I am working on Dreamweaver so that is were I am starting from. I find myself working more and more in code view and just writing in what I want. Not sure if it is worth starting clear over and writing from scratch or not. Don't feel I am quite to that knowledge level yet tho.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
Not sure if it is worth starting clear over and writing from scratch or not.
Click to expand...
why not give it a try.
first a reccy of the page elements.

  • header
  • left nav
  • main content
  • footer
  • all centred in a wrapper
HTML: 
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
or with html5 you could simplify it further...
HTML: 
<div id="wrapper">
<header></header>
<nav></nav>
<div id="main"></div>
<footer></footer>
</div>
and you could even use <main> if you wanted to although I'm doubtful on its level of support as tis only new(ish)
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element


so taking your about page for example your html would be.
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About our Cabinetry Business</title>
<meta name="description" content="Countryside Cabinet Shop has been in business for more than 20 years, with a history of craftsmanship going back generations."/>
</head>
<body>
<div id="wrapper">
<header>
<h1>Countryside Cabinet Shop</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Cabinet Gallery</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</nav>
<div id="main">
<article>
<h2>Countryside Cabinet Shop</h2>
   <p>Countryside Cabinet Shop has been in business for more than 20  years, with a history of craftsmanship going back generations.  What  started as a hobby has grown to become a full time cabinetry business.</p>
   <p>Our main focus is on quality and customer satisfaction.  We believe  in quality, and every cabinet or piece of furniture we build speaks for  itself.  We install what we build, because we believe that cabinetry or  furniture is only as good as the installer.</p>
   <p>We are excited about the future and look forward to serving our  community in the years to come.  You can rest assured that we will stand  behind our craftsmanship.  Our goal is to design and build a product  that is customized to fit your specific needs.  We will work with you  from the early stages of design all the way to installation and  completion.</p>
</article>
</div>
<footer>
<p>Quality From Design To Installation</p>
</footer>
</div>
</body>
</html>
preview in your browser and check it out. It looks pretty average I know but 2 things to note with it AT THIS STATE.
1. It's readable as a document
2. look out! it's already responsive, although it doesn't look too good on the phone, you still need to zoom to read it, so add this to your head and it'll fix that...
HTML: 
<meta content="width=device-width" name="viewport" />
much better. (and you haven't disabled the ability to zoom. if the end user wants to)...

starting from here.
these are a good read.

mobile first
http://www.lukew.com/ff/entry.asp?933
responsive design
http://alistapart.com/article/responsive-web-design
media queries
http://www.w3.org/TR/css3-mediaqueries/

...so now you'll want to link to a separate css in the head of your document.
and place your scripts at the bottom of the document just before the </body> tag.

open the blank css file and start going to town with it.


...and on and on and on.


I'm off to do some gardening now. let me know how it works out for you.
 
ronaldroe

ronaldroe

Super Moderator
Staff member
K

kyle3728

New Member
Any advice on where to start with the fluid layout to make it mobile compatible? So far I have done everything pretty definite, defining each div ""pixels by ""pixels. I was pretty enthused with the help you gave me but after spending a good part of the day on it I am not quite sure if I even know where to start. I did move the CSS to its own page and am using it on the /gallery/entertainment.html page but with the rest guess I will need to standardize the sizes as I have the divs sized to each individual pages content. Basically just the height of the sidebar and content divs. Maybe there is a way to make that fluid based on content, I do not know. Thanks for your help so far.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
Start with the HTML provided, start at mobile size. Resize your browser window if you don't have access to a phone. Firefox has responsive viewports too if that helps. Style what you can. Avoid the urge to set it in stone with pixels - em and/or %. Also avoid any positioning at this stage. Forget about it "looking the same" on a phone - pointless exercise. Once you've got it looking ok on a phone layout expand your browser, at the point where the design becomes compromised, add a breakpoint. Rinse, repeat.
 
K

kyle3728

New Member
In the meantime could someone help me find a patch, workaround or better yet the cause of my problem with my gallery pages? I am pretty sure it must be a problem with the css on my "clearbox" viewer...somewhere. It is affecting the image files on my nav menu also but only on the pages that have the clearbox. I am working on recoding the whole site but my boss isn't happy with how those pages are basically broken on IE and Firefox in the meantime. Any help would sure be appreciated! Thanks.

www.countrysidecabinetshop.net
/kitchengallery.html
/bathgallery.html
/storagegallery.html
etc,etc
 
Phreaddee

Phreaddee

Super Moderator
Staff member
I'm sure if you addressed the points in post #2 you'll go a good way to resolving your problem.
 
K

kyle3728

New Member
If you look at the /entertainmentgallery.html you will see I have done some of these things already and it hasn't helped my problem of thumbnails jumping all over the place when you hover over them.

I put the nav in a ul instead of <p> like you suggested. I moved most of the scripts to the bottom of the page and I moved the main css to a separate file. Most of the other things you mentioned would be positioning items, correct? I am working at rewriting all this but there is a lot of referencing and trial and error as I am realizing how much I do not know about css. Was there a certain part of post #2 that you were referring? Thanks for your help so far.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
I'd actually hazard a guess it's to do with the "clearbox" gallery and implementation of the javascript associated with it.

I noticed your gallery has rel="clearbox[gallery=Gallery,]"
not sure if the extraneous , will make a difference. however

It might be wise to utilise a gallery plugin that has at least some substantial documntation, as this appears that it doesnt.

 
Phreaddee

Phreaddee

Super Moderator
Staff member
here's a list to start you off...
http://coding.smashingmagazine.com/...ns-for-image-galleries-slideshows-lightboxes/

or
http://galleria.io/
or
http://nivogallery.dev7studios.com/
or
http://www.twospy.com/galleriffic/

or
http://www.onextrapixel.com/2011/07...ges-galleries-sliders-and-slideshows-plugins/

as you can see there is many many different ones out there.
one that looks and works as you want without needing too many customisations is usually the best way to do it.
also, make sure it has detailed instructions on how to implement it.
 
K

kyle3728

New Member
Received solution over at Digital Point Forum by karthimx.

Quote....
""This is not JavaScript issue, its a css issue.
On images hover you have given styles as float: right
All images are going to right on mouse over.""

Thanks for trying tho....
 
Phreaddee

Phreaddee

Super Moderator
Staff member
Glad to see you fixed it...
Sorry I only had 5mins on the bus to check before.
Hence why I said it was a "guess"
 
You must log in or register to reply here.
Top