Jump to content

Surefire Mechanical

  • Content Count

  • Joined

  • Last visited

Posts posted by Surefire Mechanical

  1. I don't claim to be an expert on SEO but this guy does, lol. According to him he doesn't just mean above it in the actual code- that would be easy to acheive any number of ways. He says that the crawlers read a webpage, as it appears graphically on your screen- left to right top to bottom (not reading straight through the code in this way). So, having a blank table (or in my case it has the company telephone number) above the left menu bar puts the top of the middle content table (with the optimized text) above the nav links so the crawler reads it first. That being said, there's always more than one way to skin a cat, so I'm sure there are other methods that work just as well. This guy showed me dozens of websites he optimized that are #1 with high competition, so I know whatever he's doing works.


    Also if you test the load speed of my page, it loads faster than 99% of all web pages. It was kept simple for this very reason.

  2. Thanks for all your help. I think I will try a different font, and I will stay away from relative positioning moving forward.


    Typically, I never use tables. I hate them. The gentleman that is directing my marketing efforts had me use them as

    a way to get the search engine optimized content before the menu links etc. It has to do with the way the web crawlers

    read your code and helps you get ahead in the SERPs


    I just find it odd that it's only with that footer section. When looking at differences between browsers, the rest of the page should, in theory, be worse since it uses larger text with bigger spans of writing but those differences at this point (now that I changed to px values, and set a value for line height) are barely noticable.

  3. Unfortunately, this problem existed long before I had decimal values in place. To be clear the problem existed when there was no styling in place, and also with whole number values as well.

    When I saw how drastic the jump from 1 to 2 px was on word-spacing etc., that's when I started to use decimals.

  4. Hello again,


    It would seem that the final piece of my puzzle doesn't want to play nice. I've wrapped my footer links and text in a <div> and styled everything so that the footer is nice and centered, filling the width of the site_wrap <div> it is all within nicely- that is in IE any way. In Firefox there are clearly differences between font width (which should just be font-size), line-height, font-weight, letter-spacing and word-spacing. To combat this, I tired styling each of these properties with exact values (in case browser-default stylesheets were slightly different) as follows in the bottom 5 properties:

    #bottom_links { width: 1200px;	        align: center;	        margin: 0 auto;	        position: relative;	        top: -60px;	        left: 20px;	        font-size: 11.3px !important;	        font-weight: 300 !important;	        line-height: 15px !important;	        letter-spacing: 0px !important;	        word-spacing: 0px !important; }

    Note- the !important's shouldn't even be needed as there are no other calls to #bottom_links any closer to the content, but I even tried it in case.


    Yet none of this styling had any effect. The result didn't change a bit:



    An example of this has been posted at http://www.surefireny.com/footer_problems.html as I am sure I must be missing something in the code or CSS

  5. Thanks again, Dsones! That much I do understand; I had the * {margin, 0; padding, 0} because I wanted everything to default to a 0 margin, 0 padding (see my other post earlier this week http://w3schools.invisionzone.com/index.php?showtopic=49995&hl= , thanks Davej!). We were talking about difference in text sizes. One thing I didn't follow, though, was why you set each heading tag padding to 0 when * already had {padding; 0}


    It's a strange phenomenon, but the height of the same font, with the same px font-size value is slightly different between IE and Firefox (taller in Firefox), as is the word spacing, letter spacing, nature of <strong> text etc., ######, even if you look at the outset border I have around the customer testimonials you'll see some pretty obvious differences (annoying BTW!)


    Very slight differences, but if you have enough text on a page, it is enough to screw up some of your positioned elements and also the way text wraps around floated images (as it can cause the text to break at a different line).


    What I was looking for was a way to set definite values, because any style sheet (whether external or embedded) should override the browsers' (as it is closer to the content). Is the only way really just to find the px values for each of these properties that make the page look like it did by default in IE?? It just seems like quite a bit of trial and error. Since I am not as experienced as you guys I figured I'd ask in case there was a better way.

  6. Hello all,


    I noticed some positioning descrepencies between IE and Firefox with the page I'm working on, and came to realize that it had to do with a slight difference in the text height. Even though the same style sheet was in call, firefox would display the text slightly "taller" than IE would, and if you have enough text on a page this can throw off elements that are positioned etc.


    My first notion was to switch to using px values for the font-size instead of %, thinking that the browsers are using slightly different styling- and that certainly helped, but I'm starting to realize that there is a slight difference between letter spacing, word spacing etc. coming into play as well.


    Before I go too nuts changing all those values and trying to find the px values that make everything sit where it was when I was using %, I figured I'd check to see if any one knows of an easy way to standardize this.


    Hopefully my example http://www.surefireny.com/text_problems.html illustrates the problem. What I see on my end is perfect in IE, but taller, differently spaced text is causing problems in Firefox (this can be seen with the text that is postioined just above the credit card logos on the bottom of the left hand menu bar)


    There are work-arounds for fixing that text, but this same issue has given me problems when wrapping text around an image as well so I'd like a legit solution to the underlying issue instead.

  7. lol, yea probably not the best way for me to illustrate the problem. I can't say anything for the state of that style sheet currently....I had been trying so many different things...that's an abandoned page, included just to illustrate as the actual page isn't uploaded-the new page in its current state is without any kind of positioning at all, and an <h1> tage is the only element. The stylesheet in it's entirety is:


    * { margin: 0; padding: 0; }body { font-family: tahoma; color: #FFFFFF; background-color: #4B4B4B; background-repeat: no-repeat; background-position: center 0; }


    the html then calls up the relevant background image and I've also tried making it the background of a <div> and including the content (in this case just an h1 heading) inside the div

    And I'm still experiencing the same issue: the <h1> is not staying snapped to the background image when the window is resized. Again, it is the background image that is moving to keep a common distance from the left and right of the windows, and this is making the content appear to shift.


    So, however battered that stylesheet may be, it's not the issue.

  8. Hello,


    I thought I was doing a simple thing, reformatting my website slightly and cleaning it up a bit but I'm running into problems. When I resize the browser window, some of the content shifts its position on me. I have tried various different methods of postioining- relative, absolute etc., and have tried asigning widths and even min-widths to elements to no avail. Unfortunately, a thorough search on the web leads me to a lot of other people having this problem and answers that aren't solving it.


    I am beginning to think it relates to the fact that my particular page uses a non-repeating, centered background image (especially as this is one of the changes I made to the layout)


    you can see an example of what's happening at


    Even worse, when I try to view the above page in firefox, the positioning is out of whack even when the browser is maximized....is this due to differences in the way the browsers handle tables?

    Of course, I need this website to display properly in all major browsers and not act up if the window is resized.

  9. You got it! Setting the default margin and padding (*) did the trick. Strange I was led to believe that changing these values for the heading or paragraph tags would override default settings from applying to them (in case you didn't want to style everything that way). I went that route because I was ok with the margin for <h1> but I suppose adding a page break there will restore the margin if I need it.


    Either way, this will be a huge improvement, that empty space was driving me a bit nuts! Many thanks for your help!

  10. Hey,

    Thanks for your reply. Like I said, setting the margins to zero in the style sheet had no effect. Neither did changing the padding or trying to avoid page breaks after the headings. This is nothing major, it's just a bit annoying, and I know there has to be a way to get the paragraph text (or whatever other content may be right underneath a heading) to butt right up to the bottom of it. It seems like, by default, it adds a page break at the height of the heading text below the heading, and then probably one above the paragraph at the height of the paragraph text. Just seems excessive.


    Thanks, I will look into that width issue as well. When I check it on my phone it automatically fits the width of my screen, so I thought all would be well. I have a droid, however, and a fairly large one at that (Samsung Note) so I will need to check it on an iPhone, I suppose. Reformatting it to the width you suggest should be easy enough. Thanks, and if you have any other ideas on the heading thing, I'm all ears.

  11. Hello,

    I am new here, and this is my first post. I am no expert...not even close! I'm starting an HVAC company, and I am making my own website, simply because the money to hire someone else does not exist. So, that being said: please excuse any ignorant questions I might ask! There's my disclaimer. Thanks in advance for your help!


    OK, so I've read a couple books on this, and I am doing my best to keep semantics in mind, as the company's internet presence moving forward is important to me. One thing I'm wondering is how to get rid of the excessive space below heading tags <h2> , <h3> etc. I have tried setting the bottom margins and paddings to 0, and have tried things like {page-break-after: avoid;}


    The answer's probably right in front of my face! Any way, you can view the page I'm working on at http://www.surefireny.com


    The space doesn't bother me below the <h1> heading of "SUREFIRE Heating Services," but it's a bit much after <h2> and <h3>


    Thanks, and if you happen to see that I'm kicking my own @ss in any other ways, please advise.

  • Create New...