Main content div not displaying on some browsers

I have a classified ads page for a car club that I wrote custom css for and it has worked great for quite a while. For the last few weeks I’m getting visitors saying they can’t see anything past the site header picture. So, I recreated the content div using flex and again most are saying it looks great, but a few still can’t see anything past the top site header image and the sponsorbox div
http://hcca.org/classifieds.php?cars

So, I switched from my custom css to a flex model at: http://dev.hcca.org/classifieds.php?cars and people are having the same problem. Any ideas what could be wrong? Is there a problem in a higher div?

No one is reporting a problem on mobile it’s only a desktop issue

Don’t know if this is the issue or not.

One cannot have an anchor inside of another anchor. Nested anchors are invalid.

And <div id="content"> has no closing tag. That’s not trivial. :slight_smile:

<div id="content">
	<div id="logonav" style="position:relative;">
		<a name="tof">
		<div id="logo">
			<a href="http://BOARDS.hcca.org/"><div id="forim">&nbsp;</div></a>
		</div><!-- close logo-->
		</a>

You might mention please if any particular browser is involved in the problem reports.

FYI: The HTML validator aborts after that error. Visually, there are a bunch more errors following that one that the validator never gets to. Run your page through the HTML validator and fix as many of the errors as you can, especially the obviously critical ones.

My guess is that the browsers that are failing are less tolerant of bad HTML than the ones that are not failing.

2 Likes

I’ll check a validator; which do you recommend? It was validating OK until I started “playing” with it.

That’s what’s odd, all the PCs and Macs I have work fine as do all mobiles. Firefox, Chrome, Vivalidi, even IE look / work on my PC and Safari works on the Mac. Contents should close; Thanks for catching sloppy coding!

Others are having trouble in a mix of OS and browsers, there is no commonality that I’ve been able to find.

I use the W3 Org’s validators:

https://validator.w3.org/nu/
and
https://jigsaw.w3.org/css-validator/

I am using Firefox desktop and see a problem with the large buttons causing a horizontal scrollbar.

Thanks for the help and for calling me on sloppy coding. I cleaned the code up to a large extent and uploaded a new file: http://dev.hcca.org/classifieds.php?cars

I’ll send emails to the people having display issues tomorrow and see if this page is any better. Does anyone see any issues?

Now I loose the background color in each <article tag / each ad if I resize the window to handheld size.

And, my .foot footer div is not laying out right at most screen resolutions. I wanted to put the .foot in a footer. but can’t get the css to work.A table for the footer sure worked well. Again, thanks for the education and assistance.

Odd, the buttons should resize with bootstrap responsive class. They resize on all browsers on my Win 7 desktop. ANy thoughts on why class=‘img-responsive’ isn’t working?

I’m still see the same kind of issues shown in @ronpat’s screenshot above. (Firefox on Ubuntu Gnome.) I suggest you finish clearing up the validation errors before doing anything else. These are images, and the declaration of width="100%" is invalid in HTML. Set the pixel width as a unitless number (e.g. width="200"), and use CSS to resize of different screen sizes. Whether this is enough to solve the issue, I don’t know; I do know that validating code is always the best first step in troubleshooting.

Hi,

Only looked quickly at this as I am in a rush but noticed these points that need addressing.

  1. You have set #txt to be height:100% and therefore it does not encompass its content because 100% is only viewport height (when it works). You can see this where your outer borders stop short and the inner content overflows.

You need to remove the height:100% (and never use it again until you understand why).

You should also remove the movement with relative position (top:5%) as relative position does not moves things while adjusting the flow. It moves elements visually but not physically and they always occupy their original place in the flow as though they had not been moved. The space that they previously occupied is always preserved and in the new position the element will likely overlap something else. Suffice to say you will rarely ever use relative positioning to move things around and is mainly used for subtle overlapping effects.

Therefore the #txt rule needs to be like this instead:

#txt {
margin: 20px auto 0;
position: relative;
/*top: 5%;
left: 0%;*/
text-align: left;
width: 85%;
/*height: 100%;*/
z-index: 1;
}

Simply use a top margin in px to make space and not relative positioning.

  1. I see this rule in your css:
html, body {
	font-size: 62.5%;
	font-size: 65.5%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image:url('../pics/HomeBG3-gray0.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}

All those rules are therefore applied to both html and body. That means the html is set to font-size:65.5% and then the body is going to be 65.5% of the html element thus compounding the size further.

Leave the poor html element alone and the only properties you usually need to apply to it are margin and padding and height:100% when needed. (You can sometimes apply an image to the html element and an image to the body element to save on adding a div but then you will run into issues with the height:100%. Background images applied to the body element are automatically propagated to the html element so leave html alone until you understand the finer points).

e.g.Your html and body default rule should be like this:

html, body{
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	font-size: 62.5%;
	background:url('../pics/HomeBG3-gray0.jpg') no-repeat fixed 0 0;
        background-size:cover; /* cover whole viewport */
	font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
  1. You’ve set height:100% here again in an inline style.

<div class="box_3d" style="width:95%;height:100%;" id="box3d">

Remove that height:100% and indeed remove the width:95% as that makes your content offset from the header.

  1. You are repeating vertically a fixed width gray background here which is appearing in the footer and on wider screens will not fill with a solid colour because the element is too wide.

<div class="box_3d" style="background-image:url('pics/txtbg.jpg'); background-repeat:repeat-y;">

I’ve no idea what you were doing with that rule but its causing problems so I would remove those styles unless you are applying it to elements that do not exceed the width of that image.

5)There is no need to add width:auto to divs because that is their default and please don’t do it inline anyway as that makes it harder to debug and is bad practice…

<div style="width:auto; padding:1.5rem;">

Hope that helps as that was just a quick look under the hood:)

As others have said first try to eradicate any validation errors as that can trip browsers up in different ways.:wink:

4 Likes

Thanks for the “quick look” and all the feedback. I cleaned up the css validation errors and reworked the styles quite a bit.

  1. Agreed, height isn’t needed in #txt. the background for txt isn’t what’s being lost. The background on each article / each ad gets lost when you shrink the window

  2. a. I removed the % in widths

  3. Thank you for correction on html and body. However, I can’t get size:cover to work on the body bg image (it works for a div). background-attachment:fixed; with a very large image seems to accommodate all browsers and windows sizes up to 1920 wide. The other corrections were very helpful

  4. Thanks again, height isn’t right there. I’m using width as a % to provide spacing and keep the inner “box” centered. Would rem units be better?

  5. Good point, but I think the grey bg image only needs to be that wide. It’s bg shouldn’t exceed the parent’s width

  6. Thank you for the correction width:auto not needed on divs

The script and it’s layout are much improved with your guidance. There are still issues that I don’t see how to fix:

  1. If I shrink the window size down, I loose the background image on each article tag / each ad. It’s like the background isn’t resizing with the page and overflows into the next ad or changes at the wrong time
  2. I convert the .contact class to block from flex as screen size shrinks, but I’m getting a big space above and below contact:
  3. My .foot div the Return to top doesn’t center and the little icon falls to the next line instead of being next to REturn to top
  4. how can I format a tag to work like the foot div?

Again, thanks for the help

Background-size:cover will work for the body without problem assuming you haven’t used the html element for another background as mentioned in my previous post. If its not working then there is an error in logic somewhere as it should work out of the box. Note that fixed backgrounds work better on the body because all elements with background-attachment :fixed are relative to the viewport and that means if you apply background-attachment:fixed to a div then that divs background will only show if the div happens to be over the place where the image is placed.

For full page background images just use the body element. Note that background-size:cover will increase the width and the height of the image proportionately until both are covering the background. That means the size of the image is unimportant in that it will be made to fit whatever. However, if an image is stretched too far then there is a loss of quality so you need to optimise the images carefully and choose a size that works across the range without being too big.

No you are incorrect and the gray is only showing part way across my screen and then stops and the rest of the div is white. I explained why this happened so you may need to re-read my post and re-test. It may be that you have a small monitor and the effect isn’t visible to you. I’ve no idea why you are using that image anyway and if you wanted to fill the whole div you could have used a small slice (10px wide) and just repeated it. Indeed you could probably use linear gradients instead of images if the image is a simple gradient (IIRC).

I note that you still have the 95% width as mentioned in my other post which makes the page off-centred and look awkward. It also means on smaller screens you get a gap on the right which again looks very awkward and plain wrong.

Your backgrounds are missing on small screen because you are floating the content items and therefore the parent when display:block non longer has any height and thus no background shows. Remove the floats from the children and the background will show.

@media screen and (max-width: 780px) {
.pic,.txtcol,.contact {
float:none;
height:auto!important;
}
}

Google ‘clearfix’ if you don’t understand why this happens and for methods of containing floats. Floats must be contained because they are removed from the flow and a parent that contains only floats contains nothing unless that parent has a property that automatically encompasses its children (such as overflow:hidden or some other display values other than block).

To center the return to top do this:


.foot a.totop {white-space:nowrap;display:inline-block}
.foot a.totop img{display:inline}

Unfortunately I am away for a few days and only have a small laptop with me which makes it awkward to recode pages so I will let @ronpat or one of the others jump in for the other questions or I will take a look when I get back.:slight_smile:

Hi, brad26. I’m following up on Paul’s request to look in on your progress. I see that the problems that Paul mentioned in his post still need attention and I see that applying font-size:62.5% to the body element is shrinking the select element to Lilliputian size.

hccs.css (line 7)

body {
    font-family: ‘Palatino Linotype’,‘Book Antiqua’,Palatino,serif;
    font-size: 62.5%;
}

whereas most of the other text is not affected by it. That is because you have chose rems for most font-sizes and rems are relative to the root element (html) and not the body element. This is also playing havoc with your media queries and accounts for the disparity between the width of the #buttonbox and the rest of the page.

These additiona font-sizes are also in the mix and should not be:

bootstrap.min.css (line 5)

html {
    font-size: 10px;
}

bootstrap.min.css (line 5)

body {
    font-size:14px;
}

Using minified CSS on a page under development makes it difficult to identify exactly where the properties are located.

Are these bootstrap font-sizes part of their original code or did you add them? I feel sure you’ve been advised to make no changes to the original boostrap CSS files; and that one should add new styles and bootstrap overrides to a “local” stylesheet so they aren’t lost if you apply an upgrade to bootstrap.

Leave a response whenever you are ready to continue.

2 Likes

Thanks for the continued help; Yes, the bootstrap css is the original and has been a problem. I’m actually loading it from cdn on classifieds.php

I thought loading hcca.css and ad.css after Bootstrap would override bootstrap css and by targeting my css at specific “containers” I’d not be as affected. But since hcca.css sets the the body font size after Bootstrap I see why there is a problem even though I don’t see it on any test computer. Since I’m using rems, should I just set the default font-size at 16px? I am using the bootstrap css to format the menu bar and the ad choice options at the top. To be honest, I’m not sure why bootstrap’s css is applicable for the ad “buttons” as those are part of a flex container. Which text is too small on the classifieds.php? The text sizes all appear correct on my PC and Mac at various resolutions from ~300px wide up to 1920/1080 and on my phone?

I saw Paul’s note on why I’m loosing the background color in each ad’s , but can’t fix it. I tried redoing things and putting each ad in a flex container and that got most people the ability to view the page properly, but a few still report a complete inability to see the ads. Paul’s other advice helped resolve many issues. What should I do next? I’m trying to create a gradient fill instead of using the grey bg, but don’t have one I’m happy with yet. I look forward to your guidance/suggestions. I think I have the latest “version” using the prior guidance on the dev Site, but I’ll check that now. Than you.

Even at 1920 / 1080 with text size set at 150% the greay background works/fills the screen. What am I missing? The background doesn’t look great, hence the reason I was trying to create a gradient fill that looks good. Are the % witdhs still an issue? Should I do all widths in rems? That’s what I’ve got on my test server, but it doesn’t lay out as well.

The code I gave you fixes it and was tested working live on this site using a live css editor.

@media screen and (max-width: 780px) {
.pic,.txtcol,.contact {
float:none;
height:auto!important;
}
}

If it doesn’t work for you then you must have done something wrong or not put the code after the original styles etc.:slight_smile:

I’m not seeing a problem on my laptop now so maybe that issue has been fixed with changes you have made but the gradient is repeating verticlly and can be seen down the left and right edges on all the blocks so you get a darker border on each side that stops awkwardly mid div. I think you should just remove the gradient and the design looks neater and cleaner straight away.

If you wanted a gradient on each block (or each alternate block) then you should be applying it to each block just like you are doing with the gray background and not just on the main parent,

Oh, now I understand which bg you are talking about; call me slow. You are talking about the background behind the ads (pics/txtbg.jpg), not the background for the whole page. That pic is only 1004px by 2000px. I just changed it to use a class with background cover. The bg image shouldn’t repeat anymore. I hadn’t noticed that issue, thanks. Although, now that its not stretching the look is different and I’m not sure I like it. But at least I think I understand the problem you were encouraging me to fix. Did I fix the correct problem?

I think the page is looking much better, thanks! However, now that we’ve redone the page its not scaling well. The flex ‘contact’ div/container isn’t sitting below the div class='flex-container> flex holding each ad; it rides up and overlaps the txtcol div. Any idea what’s causing this? The problem appears at all screen widths below about 500px. OK, I “fixed” the problem with media queries up to 475px at least on a Win7 PC, but that doesn’t seem to be optimal.

Are you seeing any other issues?

Yes, that’s the one I was talking about :slight_smile:

Remove background-size:cover as that makes it cover the whole page and I’m sure that’s not what you want. Add background-repeat:no-repeat.

.adDivBG {
background-repeat:no-repeat;
}

Im still seeing you use heights for fluid content and you should never do that.

style='height:26.5rem'

and:

style='height:100%;

Use a min-height if you need a minimum height but I don’t see a need for any of those and indeed they seem to be messing with the vertical position of the flex containers because they don’t match the content height (and never will in a fluid layout).

The contact text (.nam) is tight against the browser edge on smaller screens so add some left padding to .nam and then in a media query at about 475px you want to add text-align:center to center it along with the other links at the bottom.

I put a height there to try to resolve the issue I mentioned in my prior post. The contact flex container is positioning up to high and overflowing the flex-container div that contains the picture and ad text. I can’t see why it is overflowing the div above/before it. I don’t see a way to force the flex

below the flex-container div.

It acts like I’m not closing a div, but I don’t see one left open

Shouldn’t cover just “cover” the container it’s in? The div in this case?

Here it is with the height removed: http://dev.hcca.org/classifiedsF1.php?cars

If we are talking about the same thing where the contact text is overlapping the image caption above it then that is because you have set a height on the pic that is too small for the container when in fact you don’t need any height on the container at all.

You have this:


<div class="pic" style="height:22.5rem;">

Remove all those heights from those inline styles and then re-test. If there are still issues then we can take it from there but the answer will not be that you need a height. :slight_smile:

Stop setting heights on things that contain fluid content (like text) as it is nonsense most of the time especially 100% height as that can never work unless there is an unbroken chain of fixed height parents all the way back to the html element and indeed in that case would limit the element to 100% height only and be of no use at all.

OK, I removed the heights and did more work on the layout. Thanks for the guidance. The page is looking better at most screen sizes as well.

The txtbg.jpg background is contained in the adDiv on my test machines. Is it covering the whole page on yours? I see the body background image HomeBG3-gray0.jpg for the page as a whole.

All of a sudden my background switcher style for each stopped working. I thought I was using this code, but It doesn’t work:

#adDiv > article:nth-of-type(2n) /*-- bg switcher --*/
{
    background-color: #ffffff;
}

Any idea why this isn’t working? At the moment I set the background through php, but a css rule would save a few bytes on each ad.

Thanks for the instructions on centering the contact div,; the first line Contact: doesn’t center when the 3 lines go to one column, centered. How can I fix this?

The article div is not a direct child (>) of #adDiv as you have another div inbetween.

e.g.

 <main id="adDiv" style="background-color:#d3d3d3">
            <div style='margin-left:auto;margin-right:auto;'>
              <article>

Remove that div that is between main and article as it does nothing and does not have a closing tag anyway which only confuses things further.

With that div removed then article will be a direct child of main and the rule should work.

You misunderstand what I am saying and the gradient background is stretched down the whole page yet most of the page has a white or gray background covering this gradient so you don’t see it. All you see of the gradient is in the first part of the page where there is no colour obscuring it but because you have used ‘cover’ the gradient is very faint because it stretches thousands of pixels instead of a few hundred.

When you use ‘cover’ the gradient is stretched right for the top to the bottom and as you are including all your article divs within that content the gradient ends up being so stretched that the top portion becomes very faint. Just remove background-size:cover or apply the gradient to that first section only as I mentioned before.

I answered that in post #15:

I do seem to be slow to catch on, thanks for the help. I tried to follow your suggestions and got rid of the extra div that my php code was generating. I can target the articles as direct decedents of main and change the bg.

Hopefully, the gradient background is working better now. I’m totally not visual and didn’t realize the bg wasn’t showing right because it was stretching a “few” pixels too many.

The contact .nam wasn’t positioned properly because it wasn’t centering on smaller window sizes. Hopefully that’s fixed based on help from a prior post.

Thanks for flagging that unclosed div; removed. There actually was a close div; Now I’m getting a validation error for a stray end tag div. If I paste the code from ?want into Dreamweaver and match tags, it says they all match.

I’m still getting feedback from 2 users that they can’t view the page at all past the logo and nav. They can’t view . Do you see any more errors? The wanted page is easiest to check as there is less data: http://dev.hcca.org/classifieds.php?want. Yes, the checker doesn’t like that I use <font and flags a few

tags in the db

With your help, I’ve made great progress, but I’d like everyone to be able to view the Classifieds.