Hey there, I have a little trouble figuring out where I am missing something on my site. I am developing a website for this company and I thought I was done.I first thought it may be But after trying publishing it.I found out that my menu disappeared and also when I was trying to zoom in/out my site looked shitty.Dreamweaver made me think It was ready.But it does not work on all other browsers but IE9. I knew something was wrong with it when MSIE worked and Firefox and chrome not. The funny thing is that the homepage looks so bad but the other pages are missing only the menu buttons. Here is the buttons css code: And the one for the background and all the rest: Can someone please help me figuring out what I missed or omitted?
Problem solve. The menu buttons images on the website were calling the pictures on my local Hard drive that is why it would not show.So i changes the source file on the server and it worked perfectly. Thanks for the postings he helped me.
Hey Thank you for responding.Here is my website I am testing at the moment. microboticsinc.com/Test/home.html I only have 2 issues at the moment. 1-The resizing when you zoom in/out.It basically puts the background images all over the place.May be I need to add a specification on the CSS. 2-My Test/news.html gives me an error 404 error file not found. But i check the redirection and everything and I do not see where I made an error Thank you
microboticsinc.com/Test/home.html. I basically fixed it on FF and chrome but trying to issue a specific stylesheet for IE so it can be compatible.Thanks
1) if you have to send IE9 custom code, you're probably relying on outdated techniques, techniques too new for proper support, or just plain broken methodologies. 2) broken methodologies like absolute positioning EVERYTHING and using fixed metric elements in the design, relying on that fat bloated steaming pile of manure known as Dreamweaver for ANYTHING, failing to test in major browser versions AS you develop the site, non-semantic markup, endless pointless DIV for nothing, clearfix methods like it's still 2001, presentational images in the markup, attributes like ALIGN that have no business being used in HTML after 1998, line-breaks doing padding's job, static scripting inlined in the markup, alt tags on elements that don't have alt (like anchors), multiple href's on single anchors, jQuery for nothing (though honestly jQuery just pisses on every site it's used on), images for text, lack of images off graceful degradation, lack of media type on stylesheets, invalid doctype, that stupid X-UA-compatible rubbish that brags to the world the code is broken, AND code before the doctype convincing IE to render in quirks mode... 3) quirks mode, of COURSE IE's not behaving like everything else... you need to get rid of the comment AND the XML prolog before the doctype to even have a chance -- much less that you have no business using a frameset doctype (even stranger since you're not actually using framesets!) 4) NOT that absolute positioning EVERYTHING on a page is actually a proper way to build a website either... JHVH help you when you want to update/change the content and nothing fits. ... and that's before we talk about the the fixed width, serif text on screen, lack of padding, image behind primary flow text making it harder to read, px metric fonts on content areas, illegible/annoying color contrasts, and host of other accessibility failures in the design. You've got a bizzare mix of invalid, outdated and bleeding edge; instead of staying in the nice safe 'stay between the lines' territory. Though the REALLY sad part is, for all of the above issues, code-wise this is one of the BETTER sites I've seen people asking for help with lately. It can be saved. Step one, fix the markup, and get all that javascript for nothing the devil out of there... not that any of it should work since you seem to have it wrapped in a STYLE tag. (part of that 52 validation errors saying you don't have HTML, you have gibberish)... something like... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Microbotics, Inc. </title> </head><body> <div id="pageWrapper"> <h1> Microbotics, Inc <span> - <!-- css off hyphen and image sandbag --> <span><!-- image sandbag --></span> </span> <small>Innovative Navigation and Controls</small> </h1> <div id="sideBar"> <ul id="mainMenu"> <li><a href="home.html">Home</a></li> <li><a href="news.html">News</a></li> <li><a href="products.html">Products</a></li> <li><a href="support.html">Support</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contacts.html">Contacts</a></li> </ul> <h2>Microbotics News:</h2> <div class="subSection"> <h3>SLC2JUSB</h3> <p> A USB cable designed to interface the MIDG Series INS/GPS and the PC. </p> <a href="news.html" class="readMore">More Information</a> <!-- .subSection --></div> <div class="subSection"> <h3>MIDG DISPLAY UTILITY UPDATE</h3> <p> MIDG Display Utility With updated Geo Mag. </p> <a href="news.html" class="readMore">More Information</a> <!-- .subSection --></div> <!-- #sideBar --></div> <div id="content"> <!--[if IE ]> <object type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="380" height="279" class="trailingPlate" > <![endif]--> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="videos/micro_video.swf" width="380" height="279" class="trailingPlate" > <!--<![endif]--> <param name="movie" value="videos/micro_video.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000" /> <p> <a href="http://get.adobe.com/flashplayer/"> Adobe Flash Player </a> is required to view this content. </p> </object> <h2>Welcome to Microbotics, Inc.</h2> <p> Microbotics, Inc. is a research and development firm specializing in navigation, instrumentation, and control systems for unmanned vehicles. Since opening in January of 1999, we have developed several technologies and techniques under numerous projects. </p><p> Our Engineering team acknowledges that size, weight, and power consumption are always vital concerns of any unmanned application. Reduced size, weight, and power consumption are the foundation of all our designs. We meet the needs of our customers by combining decades of experience with the latest technologies to design and fabricate the quality navigation, instrumentation, control, and telemetry systems our customers rely upon. </p><p> Our wide range of experience in electronics, fabrication, autonomous control, telemetry and communication systems allow the our Engineering team to produce reliable products and solutions to ensure our customers are mission ready. </p><p> For more information, please see our <a href="about_us.html">About Us</a> page. </p><p> <a href="contacts.html">Feel free to contact us with any questions</a> </p> <!-- #content --></div> <hr /> <div id="footer"> © Microbotics, Inc. All Rights Reserved. <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Which is probably withing 5% of what I'd have as my final markup for such a page... maybe a couple extra div for some of those oddball images you're using -- though honestly a lot of that I'd call "not viable for web deployment" because they reek of "but I can do it in photoshop" -- fixed widths and fixed heights is usually a steaming pile of /FAIL/ when it comes to making a website, no matter what the "draw a pretty picture of a website first" folks claim. There's a reason you don't see major Internet successes using those types of elements -- such things being restricted to pages built by nubes (no shame to that at least), 'designers' personal pages and/or portfolios, or brick and mortar's for whom a Internet presence is an afterthought. If I have time later I'll belt out some basic CSS to show how I'd approach that -- I may take some visual liberties so the page isn't so... garish, as well as to address the 'not viable for web deployment' bits and pieces - like the images that aren't designed to expand and contract to actually fit to the content.
Hey,First of all thank you for your kind help.I appreciate that. I wanted to say that you are totally right about everything you were saying and I agreed 100%.But the hick is I am fixing this website and I was told that the IMAGES (which was one single image before) had to stay the way it is. I would have liked to start a brand new design for this mess.But my employer wants exactly THIS with all these images as layers in the background and I am trying my best to hustle and keep it the way he wants it.I specifically warned them at the beginning of the development that it was not the way to go.But hey....they giving me my paycheck.I do what they said.Unfortunately. Thanks though for your help Deathshadow.
Hey,I pretty much fixed what was to fix beside IE which keeps giving me trouble with the background-size which does not fit probably and think is a stackoverflow issue.But I tried to solve it by creating a Stylesheet for IE only but it does not recognize it. I also wanted the website to stretch like this website:buellxb.com what did I do wrong?Here is the current website:microboticsinc.com/Test/home2.html .Help please
IE doesn't HAVE background-size, at least not prior to IE9. Even if it did, that's why background should be TILEABLE. Not sure what you mean by stretch, since that site doesn't... or do you mean vertically; the NORMAL behavior of a website if you don't absolute position everything and stick yourself with backgrounds that aren't viable for web deployment. Really I'd have a LONG discussion with the client -- because what you have there is a typical example of "But I can do it in photoshop"; doesn't mean it has anything to do with practical website design or deployment. A lot of what you have as single images should in fact be split up into pieces -- there is NO WAY this: http://microboticsinc.com/Test/Resources/Web Page Parts/Misc/micro_bkg1.jpg ... should be a single image. It automatically means you cannot have dynamic height, it automatically means you cannot have dynamic width... and making that stretch with background-size is just going to look like arse. Much less that at 201k it's all by itself almost three times my ideal target and 40% more than the upper limit of what I'd allow for that entire page's HTML+CSS+IMAGES. (72k and 144k respectively). Retaining the fixed width... I'm out the door in a minute or two, but I'll leave the window open so I'll not forget to do up CSS and remaster it to show how I'd approach that, trying to stay 'as true' to the original as possible even if it is bad design. Some things MUST go however... particularly if you want dynamic height. Don't suppose you have that background map WITHOUT the other stuff around it as a higher quality and/or taller image?
@Deathshadow:Thank you for conforming my thoughts. See I am dealing with people with no development background what so ever and I told my client that the bild he wanted to push could not be dynamic and was too big.I wanted to separate this single picture in 3 different pictures and I did it.But because he did not work on IE my client did not want that option.He told me to use this image.This image was the one that was initially made by the former webmaster for this website. @carritrosien:I tried to do it for FF and Chrome and it worked 2 weeks ago fine.But because of IE I had to go back and try to trick it so it can fit IE browser.But it looks shitty on others now.But if they want it,I give them what they want. I just want to try fixing the vertical stretch or resizing Thanks so much your help.I appreciate that.
Finally hit me what you meant by 'stretch' -- you were trying to do a 100% min-height layout, weren't you? Those new background images made it apparent what you meant... I think. Try this on for size: http://www.cutcodedown.com/for_others/v_misse/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/v_misse/ is unlocked for easy access to the bits and pieces. I remastered all the images while trying to preserve as much of that layout as possible... gave it 100% dynamic height so that the content area always stretches to fit. That map background really was the hardest part -- putting it on the faux-columns would have been a disaster size-wise, but some negative margin tricks (and a boat-load of stupid hacks) made it work... Such hacks are why I usually would tell a client where to shove it on such a design (along with the fixed sixe header crap). Tested working all the way back to IE 5.5 -- though because I did the shadows on the footers colored dividers in CSS3, naturally IE8 and lower don't get that part of the design. (OH well, you REALLY want that, use a png for each). I didn't plug in the background images on the body or the top/bottom sandbags, I figured you could figure that out. Redid the menu so that it has images off graceful degradation and only needs a single much smaller image... and gave it a 'current' state so you can mark the current page (if desired). Also made a few changes to improve legibility and make the map not look so silly on really big displays when it just 'stops' (subtle fade to white at bottom). Tried to document all the "really weird" stuff in the CSS related to making it work in anything prior to IE9. Hope this helps.
Thank you so Much for the help!I will tell you the truth.I am freaking frustrated right now because the client told me now that he wanted the blue background (carb.jpg) to stay in that position and I am trying to explain why it cannot work properly in IE but they said they do not care.I have to make it work.I am so freaking pissed.Evrything works by the way.It stretches the way it supposed to and they like it but not with this colour with their background.I finished this 10 days ago made it work on FF and chrome.But no we want IE.You do IE and the other browsers are messed up and they are still complaining.Now works with everything and it is not what they want.Thanks again anyway.