Jump to content
bbeckwith

Header Full width and Fav. Icon All Browsers

Recommended Posts

Hi everyone, I'll keep this short. And I appologise in advance because I'm sure this problem has been solved before (I just can't seem to figure it out). I am not great with HTML but I would say I'm decent. The first picture you can see my header goes the full 100% width. The second picture shows that if you minimize the browser so that you have to horizontally scroll that the header disappears behind the navigation. If you want you can go to my site now and test it out (It's still being created so bare with me). www.bbeckwithdesign.com help2.jpghelp.jpg I want the header to always be at the top with the navigation (not fixed where it stays at the top of the window, but instead at the top of the page) I want the header to always be 100% width of the page no matter what size. I guess I should also mention I want my navigation and title along with my main body to be relative where they stay centered on the screen (960px) One last thing, my favorite icon work on all browsers except for IE. Any code snippits that would take care of that??? Thanks for the help guys. Brad B.

Edited by bbeckwith

Share this post


Link to post
Share on other sites

The #mainpic element id using position: relative; and left: 165px; this forces it beyond your 960px width, so the scrollbar appears when the right edge of this element is reached not the 960px you have set. Also the top background is set to 100% width, so even though the scrollbar appears at 960+ and 960 and less it still keep shrinking to browser window width, as there nothing there to stop it, you should use min-width: set to 960px; to prevent thisl, but set the margin, padding of body to zero, as by default they have a about a 10px margin. thats probably why you are using top: -#px. Try avoid using position: as much as you can, only use position: when you really, realy i mean really can't achieve the same result with margin:, float: and padding. oh yeah! IE has always been slow updating the favicon, try clearing cache/browser history, another trick i remember is to drag it away from address bar, and let go within the address bar. it should suddenly decide to update itself.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

dsonesuk Thank you so much for the information. I might need to rework the structure of my site it looks like. I never realized that I should stear clear of positioning. But I will do my best to replicate what I already have with padding, margings and float.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...