Strange results using normalize.css

[paulob]

Hi,

Before I offer fixes an important point to remember is that some things are not viable for the web and just because you can draw them doesn’t mean that they can be implemented or are a good idea. Many designers do not understand this concept because they work on fixed pieces of paper, The web is not fixed in any shape or form and this needs to be considered in the design and then the design amended to work the best way for its current medium.

With that out of the way we can look at your comments :)

1) The pixel border at the top of the design and the right of the design can be removed with:

#outer{
border-top:none;
border-right:none;
}

2) The border on the right of the right content can be removed with.

#main{border-right:none}

3) I’m not sure what you mean about the fade into the header as it looks ok to me but you can just create a wider slice. I’ve changed my demo and used this image (refresh your browser to see it ). However you can probably make a neater fit from your source files but you need to leave off the extraneous borders.

I changed the background properties a little so these three rules have now changed are amalgamated with the other changes I mentioned above.

#outer {
    width:980px;
    margin:auto;
    padding:1px;
    border:1px solid #7d766c;
    border-top:1px solid #eae3d6;
    background:#343433;
    color:#000;
    border-top:none;
    border-right:none;
}

#inner {
    padding:0 9px 9px;
    border:1px solid #22201c;
    border-top:none;
    border-right:none;
    background:#343433 url(images/xright_column_image.gif) no-repeat 100% 0;
}
#main {
    border:1px solid #343433;
    border-top:none;
    border-right:none;
    background:#e7dec6;
    min-height:470px;
    display:table;
    border-collapse:collapse;
}

The demo has been updated (refresh browser a couple of times).

I think that’s as close as you will get to those multiple fading borders as they just aren’t viable for the web (unless we use CSS gradients and then support is only the very latest browsers).

[Anonymous]

I am understanding a bit more due to being more relaxed with this new approach to the page.

I made the change to #main{border-right:none} but left all else alone as I like the appearance as it closely matches what I envisioned. What I have thus far is here.

If you compare that with my original concept here you will notice a more pronounced outside line along the right edge which makes this area of the edge stand out in harmony with the rest. I see that this border id defined by the class borders and I was able to use a gradient in the image itself.

The question I now ask myself is are those in my target market operating with the latest browsers and upgrades. I believe they are. If people don’t have the $$ for basic upgrades, then they likely aren’t going to be interested in the services of the foundation. For those browsers which are dated, would there be a default if they can’t handle gradient borders in CSS?

Best Regards.

[paulob]

Hi,

I’ve updated my demo and removed the left and right border from the wrapper and inner and instead used a repeating slice to tile the borders down both edges and the main dark background colour. (Remember to refresh two or three times or the images won’t update)

On the inner element I’ve overlaid the right side fade image so that it merges both into the header and into the repeating background underneath.

I also added an extra border at the bottom using the pseudo class :after rather than use an extra html element.

This is pretty close to to your original while still keeping the html as straight forward as possible. The right side should be exact now as it is an image cut from your image and then merges into a repeating slice at the bottom so the layout will continue to grow.

You shouldn’t really try to replicate the photoshop fading borders on every element as its just too much work. Remember people visit the site for the content and not the design. Ugly sites with good content do better than nice looking sites with no content.

In essence you are doing this in reverse because your content should be the first priority and then you design the site around the content (although in reality you do both in tandem).

I think you have enough information now to complete this as all the elements are in place.

[Anonymous]

Greetings,

The latest demo looks great, and it is more compact text wise than my original.

I’ve been playing around with the page a bit, but am still in the dark with regards to much of what is in the head tag. What little I’ve accomplished is here.

There are a few things I notice, but have only been able to identify and correct one. The one I corrected was the numerical value for the bottom padding in the #inner { tag. I added 1px to it, but notice there is no faint black line (#22201C) behind it as there is to the r & l border. I’ve tried to change the bottom border colors, add and subtract elements, values, etc., but haven’t figured it out. There is also a three line image between the logo and the header that is noticeable in the upper part of the gap between the two and I have no idea where it is coming from.

Best Regards.

[paulob]

Hi,

The coloured line is the replaced text peaking through the gap in the header.

Hide it with this:

.header{overflow:hidden}

You can’t add a bottom border to #inner because the side borders are created with images and the bottom border would spoil the effect.

Without adding an extra element we can use the :before psuedo class (IE8+) to add another border in the same way we used the :after pseudo class.

Add this:

#inner:before{
content:" ";
position:absolute;
bottom:0;
left:2px;
right:2px;
border-bottom:1px solid #22201c;
}

Generally having three borders around things is not a good design move because you basically need 3 elements before you start and that complicates things from the get go as you are producing extra mark up for the design when the mark up should be for content.

Keep it simple as I mentioned before. I guarantee that 99% of users would not know that you had 2 or 3 borders and indeed I can’t spot them until I zoom up to 400% :)

For modern browsers you could probably have just use an inset box-shadow instead to give a feeling of depth. Anyway the code I offered above should resolve the issue.

[Anonymous]

Without adding an extra element we can use the :before psuedo class (IE8+) to add another border in the same way we used the :after pseudo class.

Will this display on all browsers?

Generally having three borders around things is not a good design move because you basically need 3 elements before you start and that complicates things from the get go as you are producing extra mark up for the design when the mark up should be for content.

Does this cause a lag in page loading? (See below)

The page looks like I had envisioned it, and better, thanks to you. I am able to see what causes what, but am still pretty much in the dark as to why. Once I get the site up, I will be able to, and am greatly looking forward to, diving into CSS in depth.

I notice the header and logo load slow, and the text in their areas overly large and rather askew. Does it need to be H1 and H2?

An oddity which I can’t explain is what occurs when I substitute the image “header.png” for “header.gif”. Both have the same dimensions, but using the png version causes the “/right_column_bkg.gif” to shift down 1px. Why? Both files are on my server if you want to try it out.

If I wanted to put a header across the page being is the width of the <div id="outer">, what would be the best way to do that? There would be no logo, just a header.

No doubt much of the complication I cause is from having a background in art/graphics and in mechanical engineering. I try to apply similar approaches to web design and as you’ve pointed out, what concepts one creates in a drawing program may be impossible, or impractical to reproduce using coding. The engineering background does help me in seeing logical patterns to most of the coding and repetitions which explain things like drop down menus.

Best Regards.

[paulob]

Hi,

I wrote a reply to this this morning but the post isn’t showing so it may have gone into moderation or something. If the post doesn’t turn up later I’ll reply again.

[Anonymous]

Greetings,

I had a similar problem a week or so ago in another thread and never did know why. Perhaps I’ve gotten off on a tangent from the original subject matter? Conversations drift and I unintentionally lose track. I just hate to fill up the forum with my topics, but it does make it easier for others who need help with specific subject I realize. I see now that I’ve entered or am well into a totally different matter than the original query. If you cannot post, I will start another topic with the above subject matter.

Apologies to all.

Best Regards.

[paulob]

Hi,

Weird I tried again and the post just doesn’t show up.

I’ll answer a few point below and see if this works!

Will this display on all browsers?

The :before and :after pseudo classes work from IE8+. Older browsers just won’t get the border which is no big deal.

I notice the header and logo load slow, and the text in their areas overly large and rather askew.

They load ok for me but there will always be a delay over images and the normal css backgrounds and borders (just look at any site not in your cache). That’s just the way it works. The images aren’t excessively large so there’s no problem there. It may be you just have a slow server but seemed fine from this end.

The hidden text under the header and logo is there for accessibility but you can make it a lot smaller by just changing the font-size for those elements. Just find the class on those elements and apply a smaller font-size.

Does it need to be H1 and H2?

You should always have h1 on a page and then use a logical heading structure through the page starting with h2 etc. Forget about how a page looks the html should be semantically sound and have a proper structure so that screen readers and search engines can make sense of it. Yoo should be able to read an html page almost like reading a book with headings and sub headings and sections in the right order.

CSS doesn’t care what tags you use as it can style them exactly as they need to be styled. Don’t mistake the default appearance of a tag for presentation. Use html for structure and CSS for presentation.

An oddity which I can’t explain is what occurs when I substitute the image “header.png” for “header.gif”

I changed the image on your live site using Firebug and couldn’t see a difference even with the pages side by side. You may need to upload the image so I can see if it makes a difference when you do it.

If I wanted to put a header across the page being is the width of the
div id=”outer”

You’d basically just add a div inside #outer but before the two columns and then it will automatically spread across #outer. Of course if you have fancy borders and things then you may need some negative margins to overlap the gutters on the page as I did with the other header and logo.

[Anonymous]

Greetings,

Note to moderator(s): I am replying to this here instead of starting another thread. I have further questions which I will start new threads for as they are further off a tangent than those below and to start a new thread in response to the last post might prove confusing to others.

The :before and :after pseudo classes work from IE8+. Older browsers just won’t get the border which is no big deal.

I have concerns that some of the market I have built a base on will be unable to see the page as it is intended to be seen. Is there a way to do it that will accommodate older browsers?

The hidden text under the header and logo is there for accessibility but you can make it a lot smaller by just changing the font-size for those elements. Just find the class on those elements and apply a smaller font-size.

h1 is a text size so I’m confused about changing the font size.

Is there a way to specify how far from the left side the text sits?

Remember people visit the site for the content and not the design. Ugly sites with good content do better than nice looking sites with no content.

and:

Generally having three borders around things is not a good design move because you basically need 3 elements before you start and that complicates things from the get go as you are producing extra mark up for the design when the mark up should be for content.

For what I do, I’ve found it best to have both. The average consumer proved long ago that the packaging is more important than the product having bought junk just because the box looked nice. As I’m called upon for graphics and artifacts, it’s best to show both.

The 3 borders appear to make the frame stand out better. I found this to be true while creating the image. I knew that creating 3 tables with different colors in html was problematic. I decided it was simpler to just use a snippet of the frame and repeat it in the columns. I assumed it was a different matter in CSS because you designed the page that way. I’m a bit confused on your comments. I can see the advantages of fewer images and using coding only to bring about the same effect where possible. Is there a point when the coding loads just as slow as a page using graphics?

[paulob]

Hi,

I’ll try to answer your queries as best I can but rather than accept what I say you should also research the points I make to make sure that I’m not talking rubbish :)

I have concerns that some of the market I have built a base on will be unable to see the page as it is intended to be seen. Is there a way to do it that will accommodate older browsers?

In reality you can never ensure that all people will see the page as you intended because you never know what settings they have decided is best for them via their browser controls. They can change, font, font-size, color etc, turn off images, turn off javascript and even apply their own stylesheet. Ultimately you have little control over the final result so its worth bearing this in mind.

I’m also a little confused here as your original site did not display in IE7 and IE6 and yet you seemed quite happy with it? My demo display perfectly in IE6 apart from a couple of borders yet you are concerned about this? (Or maybe you weren’t happy with your original.)

If I can clarify that I don’t actively support IE6 or IE7 any more (neither does most of the web) as their usage has dropped to 0.2% for IE6 and 0.5 % for IE7 and in a little while will have vanished completely. Therefore making html changes to accommodate dead browsers is foolish to say the least ( unless you have hard evidence that your users are all IE6 users).

You have to draw the line somewhere. What are you going to do for people who have no electricty? :)

If you have good reason to support out-dated browsers then yes you can accommodate them by adding more mark up to your page but that should always be a last resort.

As I mentioned before if you wanted three borders you could simply make three nested divs around the layout and apply a different coloured border to each div. Of course that would have a knock on effect on the current layout and you’d have to change all the inner elements sizes and positioning to match. I’ll leave that for you work out as changing the html to support IE7 and under (when they already look almost perfect) is not something I will consider at this stage.:)

As I mentioned above don’t take my word for this as I am echoing best practices but ultimately its your decision and feel free to ignore the advice if you think that it’s of prime importance.

h1 is a text size so I’m confused about changing the font size.

You are confusing structure with presentation again. An H1 is a heading tag (nothing more nothing less). It does not say anything about how it is supposed to look. You control the size with CSS (or just accept the browser default).

e.g. in my demo (which I have updated with any code from this post – find the link in previous posts) you could change the size like this:

.logo a{
    font-size:80%;
    text-align:center;
    padding:10px 20px;
    height:352px;
    color:#000;
}

The text has been centred and reduced. The height is needed to match up with the height of the image as shown in previous posts.

For what I do, I’ve found it best to have both. The average consumer proved long ago that the packaging is more important than the product having bought junk just because the box looked nice. As I’m called upon for graphics and artifacts, it’s best to show both.

This may be true outside of the web but the web is primarily about disseminating information and the phrase “content is king” is not bandied around for no reason. A number of users surf with css, images and js turned off in order to get to the content quicker and will never see the design.

A lot of graphic designers think the web is the same as a sheet of paper and think that all the concepts that they learned for print also apply to the web. This is not true. The web is a vastly different medium with its own set of rules. Try drawing a picture on a piece of paper where the image is six inches wider and longer than the paper you are drawing on.

However, there is no reason why sites can’t look good as well as well structured but as I mentioned a few times now you should be building your design around the content and not the other way around.

In the end though it is your choice and if you think that the design really needs the embellishments that you have designed then by all means add them. I am only pointing out the practicalities and accepted practices.

Some designs need to be complicated and intricate where the site is concerned with graphics but even then you would tailor the design to fit in with the requirements of the web and avoid structure that are hard to manage nicely.

How far you go to achieve a design is up to you but you do risk complicating matters and should take that into account.

I think I’ve said about as much as I can on that subject but feel free to so some research and see what others are saying. Some people will say the design is more important but I think you will find that most people say “content first”.

Is there a point when the coding loads just as slow as a page using graphics?

Even small images would incur more overheads than 100 lines of code. It’s all about managing resources but it isn’t wrong to add images where needed or where it makes life easier. On small sites you don’t really have to worry too much but in the end every byte does count. You often find that people gzip and minify everything but would still have achieved better results if they’d simply lost one large image.

If you check the demo now I have added a fix for IE7 (using expressions to simulate the :after pseudo class – google “IE expressions” to learn more) and IE7 will now get your beloved bottom borders :)

You will find the IE7 and 6 specific code within the “Conditional Comments” in the head of the page but you can see how this starts to make things more complicated when the hacks start mounting up.

the following link http://dowebsitesneedtolookexactlythesameineverybrowser.com/ sums it up nicely. :)

[Anonymous]

I’ll try to answer your queries as best I can but rather than accept what I say you should also research the points I make to make sure that I’m not talking rubbish :)

Please don’t misunderstand me. I’m not questioning your statements at all, I am merely trying to understand your way of doing things. I’ve noticed that everyone seems to have a different approach to page layout with CSS. The first page I showed you was created after watching an online demo video and I assumed it was a good approach, but after you pointed out the flaws in it I wasn’t happy with it. Obviously the tutorial I wasted 30 minutes watching was wrong. I am pleased with what you have created I just don’t fully comprehend all the coding behind it, especially in the head tag. I had just learned things like div classes unordered lists and the like and now see things like input[type="search"]::-webkit-search-cancel-button and other things that are quite intimidating to someone who hasn’t even learned the basics. I’m more cautious in my approach, and less certain of my abilities after learning the wrong approach to page construction from the get go.

I know that coding isn’t deciphered the same way in all browsers. This has been true since the early days of basic html. Drawing the nuances then provided better control once the realm of dial up was left behind, but there were still limitations that drawing could not control and the result had to be accepted. I realize that CSS opens up many more possibilities and easier ways to get results, I’m just very new at this and do not know how to get those results.

I’m also a little confused here as your original site did not display in IE7 and IE6 and yet you seemed quite happy with it? My demo display perfectly in IE6 apart from a couple of borders yet you are concerned about this? (Or maybe you weren’t happy with your original.)

Are you referring to this page, or my current site online? I was initially pleased with the design of the former and believed it was sound having learned how to create a page using divs from the aforementioned online tutorial. I hadn’t added anything to enable it to be displayed in IE6 or 7 because I had not reached that point in learning and in any event would not have considered IE^ as it is too old. Had I known about the stats for IE7 I wouldn’t have bothered with it either. Remember, I have only been at CSS for weeks, not months or years. I feel like a kid who had just learned to build a house out of legos and then was shown how a real house is built and expected to do the same using legos. The basic knowledge is there, but an advanced knowledge and tools aren’t. I am amazed at what you can do. I have visited your site, sent you an email through it, and have read some of what is there. I will read more when I am able as I want to learn advanced CSS, but for now I’ve a thousand things on my plate and a deadline to have at least a basic site update in two weeks. As for my current site, I am unhappy with it too as it is woefully outdated and the design is tired. The current effort is out of necessity. Believe me, in my current state I would rather just close the site down, but that isn’t an option so my only option is to update it. There are some pages such as the one here that I have no idea how I will update it. I felt I could after thinking I did a good job on the index page, but considering all the mistakes I made with it, and all the coding (which is an unknown to me) that is needed in the head tag, it’s not going to happen very soon. I need to learn a great deal more, and be able to concentrate on studying, before attempting that. At this point there is just too much on my shoulders.

If I can clarify that I don’t actively support IE6 or IE7 any more (neither does most of the web) as their usage has dropped to 0.2% for IE6 and 0.5 % for IE7 and in a little while will have vanished completely. Therefore making html changes to accommodate dead browsers is foolish to say the least ( unless you have hard evidence that your users are all IE6 users).

I was not aware of this data and it certainly helps knowing it. I deal mostly with museums, professional collectors, and the occasional novice asking questions about authenticity. I also get the occasional person looking for information on a ship their ancestors traveled on. I assume most of them have a relatively new browser, and for those who have an ancient one, I figure they are just out of luck and will get the content (if that).

You have to draw the line somewhere. What are you going to do for people who have no electricty? :)

For those living in such primitive conditions, I could print the web pages on paper, glue the sheets end to end, and affix them to an upper and lower roller with small hand cranks on both. ;) (Old engineering habit of being presented with a problem and finding a solution.)

Thanks for the update to the demo regarding the hidden text in the logo. It is easy to understand what the updated code does.

While the web may be more about information than images, my business is more than providing information. I provide historical relics for display, graphics for licensing fees and other services. It is essential that people see the product(s) to know what is available and what they can expect. Auto dealerships have showrooms because a mere description of a vehicle wouldn’t entice many buyers. For those who have images and js turned off, they are not going to be looking for what I’ve been doing for the past 15 years and had done as a hobby 25 years prior to that.

I agree that a site should be built around content, but mere description would not hold an audiences interest in my field. It’s like going to a museum and only reading about an artifact without actually seeing the item and housing the museum in a cardboard box. Some things can get by with no design and offer little more than a place for people to exchange information, even bad information. There is a well known forum, indirectly related to the subject matter I am connected with, that is a prime example of this. Poor design and the information provided there is +80% of the time wrong.

I appreciate the IE7 fix, but now knowing that only 0.5% use it, it wasn’t necessary. I have IE8 on my PC and admittedly am a late updater, so I figure anyone with a browser older than the next oldest version to anything I have is hopeless and is not in my target audience. I’m pleased to know that even those with Jurassic Era Windows will be able to raise their magnifying glasses and see those borders that I built the rest of the page around;) Kidding aside, it may seem like that, but I do see that the faint black lines do add definition to the area. It is true that no one else would miss them if they weren’t there, but I believe most would agree they do make a better image if they saw a comparison. I added it to make the frame around the logo stand out a bit more.

Loved the link!

I’ll be asking about a horizontal menu I want but will ask in a different thread later today or tomorrow. I hope you will reply to it as some of what you’ve presented regarding borders will be essential for the border designs of the “button”.

Again, thank you for all of your input and coding. It may seem like I am not heeding what you say, but I am taking it into consideration and it is helping a great deal. Again, it is essential that you keep in mind I am very new to this and I feel like I am in physics class all over again from day one. It is quite intimidating, but I will get to the end and understand CSS on a high level with the help of people like you.

Best Regards.

[paulob]

Again, it is essential that you keep in mind I am very new to this and I feel like I am in physics class all over again from day one. It is quite intimidating, but I will get to the end and understand CSS on a high level with the help of people like you.

No worries, I sometimes forget that there is a lot to take into at first and is possibly overwhelming when you are just getting to grips with the subject. There’s always something else to take note of and when you learn something it may only be applicable to the problem at hand so you need to learn strategies based on the differing content/ design that you are currently working with. That’s the problem and beauty of CSS in that you can do the same thing with many different approaches but usually only one of those approaches would be suitable for the current task in hand.

For those living in such primitive conditions, I could print the web pages on paper, glue the sheets end to end, and affix them to an upper and lower roller with small hand cranks on both. ;) (Old engineering habit of being presented with a problem and finding a solution.)

Touche :)

There are some pages such as the one here that I have no idea how I will update it. I felt I could after thinking I did a good job on the index page, but considering all the mistakes I made with it, and all the coding (which is an unknown to me)

You would need to define the task first and decide how you want that data to be presented and whether it should be in the same design as the new page. That will obviously present some difficulties considering the reduced space available in your current design (remember what I said about content first :)). You may want to create thumbnails of large images and then allow users to click them and open in a modal window (usually called a lightbox effect). This allows the content to fit into a more compact format as the large image hidden is hidden by default.

Without wishing to confuse the issue we haven’t touched on the subject of small screens such as mobile and whether you should be creating a responsive design instead. Of course that is a whole new can of worms and is on the cutting edge of current practices. It complicates the design process considerably as you have to take into account variances in the screen width and adapt the design to cater for this. However, I think this is a step to far at your current level but something to think about as you progress with your skills.

Don’t expect to get it right in one go and don’t worry about mistakes as we all make them (and still do). There’s always something new to learn so we are all in the same boat but just at a different stage.

[Author]

Posts