some minor css issues...
i've been working with css for a while but i'm still far from being an expert and i have two simple things that i need done but can't figure out. i hope you guys provide some help!
the site i need help with can be found here http://www.sublimestylee.com/v7/
1. as you may notice, the border under "Recent Files:" and "News:" hangs over by one pixel. I know why it's doing it, but can't fix it. CSS doesn't allow me to say "width: 100% - 1px;" if it did, problem solved. so how do I make that box with the border around it one pixel narrower if I am using percentages. Here is the CSS and HTML for that specific part.
CSS:
#recent_boots
{
position: absolute;
height: 22px;
width: 60%;
top: 165px;
left: 277px;
background-image: url(../images/header_bg.gif);
}
#recent_boots_content
{
position: absolute;
height: 100px;
width: 100%; /* Need to remove one pixel */
top: 22px;
background: #FFFFFF top left;
border: 1px solid #C1C5D0;
}
#news
{
position: absolute;
height: 22px;
width: 60%;
top: 302px;
left: 277px;
background-image: url(../images/header_bg.gif);
}
#news_content
{
position: absolute;
width: 100%; /* Need to remove one pixel */
top: 22px;
background: #FFFFFF top left;
border: 1px solid #C1C5D0;
}HTML:
<div id="recent_boots">
<p class="header_font">
Recent Files:
</p>
<div id="recent_boots_content">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
<div id="news">
<p class="header_font">
News:
</p>
<div id="news_content">
<div id="content_font">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ante.
</div>
</div>
</div>2. I want to add a footer for copyright information and navigation links underneath the "News:" box, but since the "News:" box has a dynamic height I don't know how to get the footer to be 10 pixels under the bottom of the "News:" box. I played around for a while and did a lot of googling but no luck.
I know you guys are good, and I want to thank you ahead of time, so thanks for the help!
demonhale posted this at 03:21 — 24th June 2007.
He has: 3,278 posts
Joined: May 2005
On the first one, I checked on FF and IE and don't see the problem... But the common cause of this is your padding assignment for the texts inside that box....
For the footer, add another div element the same way you add the recent files and news box, only add a top margin of 10px... Hope that helps...
sublimer posted this at 03:42 — 24th June 2007.
They have: 41 posts
Joined: Aug 2006
well i cheated on fixing number one. i added to the css for the bars above the content "border-right: 2px;"
i'll work on number two, hopefully it works, thanks!
webwiz posted this at 06:46 — 24th June 2007.
He has: 629 posts
Joined: May 2007
Hi Sublimer,
First, the good news: The headings and the borders line up perfectly in IE 5.01 and IE 5.5 Windows.
Now the bad news: You have a lot more issues going on than a couple of pixels offset. The page breaks badly with any attempt to resize the text. Of course, you can't resize text with any version of IE on Windows with the text resizer. Anyone who has a problem reading such small text must use the Internet Accessibility options to increase the size. The new "zoom" feature of IE7 expands your content off both sides of the screen - not too useful, IMHO.
Using text resizing, or just setting a minimum font size > 12 pixels will break your page, to the point of being unreadable. Nearly all modern browsers allow these options.
You also need to specify a generic font-family as fallback to Arial. Presently, if a visitor's computer does not have Arial installed, they will likely get Times New Roman. That is significantly smaller than Arial.
If you allow most elements to position themselves normally, without trying so hard to control every pixel, I think you will be better off. Your code is also suffering from a severe case of "DIVitis."
Check my "quick and dirty" effort. I added an H1 for the benefit of non-visual agents like Google, but it's not visible:
http://webwiz.robinshosting.com/temp/
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
sublimer posted this at 00:30 — 28th June 2007.
They have: 41 posts
Joined: Aug 2006
Wow, webwiz, I really appreciate it. I'll incorporate the items you suggest and apply them to my future efforts, thanks again!
could you explain this a little better please?
"If you allow most elements to position themselves normally, without trying so hard to control every pixel, I think you will be better off. Your code is also suffering from a severe case of "DIVitis.""
EDIT: I straight up copy and pasted the code and formated it to my style, and I am having a few small problems...
1. What is <script type="text/javascript" src="Sublime_Stylee_files/brand000.js"></script> Where can I get this JavaScript file? I looked for it on your site, but to no prevail. This could solve my other issues.
...like...
EDIT (I fix the images problem) The images do not show up.
A | appears nowhere in the code so I am not sure where it is comming from and why it appears in the Register and Login links.
Also, I notice some 's with no class or id associated with them. What is the point of this? For example...
<div><h2>Recent Files:</h2>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
What is the purpose of the clearer div? I am assuming this is some CSS trick.
I have a big CSS book infront of me that I've been meaning to read, its just one of those things that you never have time for.
Thanks for your help. I am really trying to get hardcore into CSS like I am in other computer languages.
New link... http://www.sublimestylee.com/v7/code.html
webwiz posted this at 20:23 — 3rd July 2007.
He has: 629 posts
Joined: May 2007
Pass on that one. I was hoping you could tell me. I included it because it is on your original code.
That's a border on the links, applied by CSS. More friendly for screen readers, as it's invisible to them.
They apply spacing ("margin") to the #sidebar and #content DIVs. Check the CSS (in the HEAD section).
You are correct. It should be explained in any book on CSS, as it's pretty basic. Check the index of your book, and write back if it's not there.
Apologies for the delay in replying. I rely on the RSS feed to alert me to new posts. Unlike every other forum I monitor, this one does not create a feed for replies.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.