Jump to content

Building Website Won't render Correct Except, Firefox


upadam

Recommended Posts

I'm a newbie coder, and have been at this for about 4 weeks. I'm practising on a radio station website I would like to get up, and running eventually. Everything seems to be positioned alright in Firefox, but when I look at what I have so far in IE, Opera, and Safari, many of the divs move out of position, and two jpegs I have don't read in the three mentioned browsers. Is there some coding that will render everything the same in these browsers as Firefox, or can someone find something wrong in the coding. I have left all the background-colors in the divs for now so I could see where they were all at. Maybe someone would be so kind as to take a look, and see what you can see. I'll be looking forward to hear what someone's findings are. Thanks !

 

 

post-29611-057116300 1288041533_thumb.jpgunsigned.htmlroot.csspost-29611-081454200 1288041480_thumb.jpgpost-29611-011272700 1288041471_thumb.jpgindex.htmldonate.htmlpost-29611-081258100 1288041439_thumb.jpgartists.htmlaboutus.html

Link to comment
Share on other sites

I've uploaded the page and made several changes, mostly with comments: http://aandbwebdesign.com/KSforum/bap.html -- I'm far from done, but ran out of time and need to leave it as is. I changed the colors on the columns just so we could see where they were, and cleaned up a bunch of the redundant stuff. See if any of this helps for now, I'll have to get back to you later, if I find time. Let me know if you have any questions that my comments don't address.

Link to comment
Share on other sites

I started working with your code yesterday, but unfortunately didn't get far.

 

A couple pointers:

-- you don't need to define IDs for all of your elements, and remember that you do have classes available to you too. I usually use IDs on main sections (header, content, footer, etc.) and if I need to specify something inside the ID, I add a class. For example:

 

<div id="content">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>

-- Also, to help reduce the number of unnecessary classes/IDs, remember that you can specify elements within other elements like so:

 

.col3 p {} or #content .col3 a {}

-- Remember you have header tags available to you to, from h1 to h6

-- If you are using negative margins to move things into position, you're probably doing something wrong.

-- Keep in mind that widths add up. For example, if you assign an element a width of 30px and a left-margin of 30px, the total width is 60px. In general though, I try to avoid using a width and a left/right padding/margin on the same element. Also, you don't have to define heights/widths on all your elements.

-- You can also use divs to wrap floated elements. For example, if I was working on your site, I would probably have a wrapper div and three interior divs for your content section like this:

 

<div id="content">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>

 

You can use overflow:auto or overflow:hidden on #content to make sure #content encloses the three columns correctly. You can also use clear:both to clear a floated element.

 

This has a bit more on css positioning that may be helpful: http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

-- However, some divs are unnecessary, like your #topleft_div and #topright_div. You could just apply those IDs to the images directly.

Link to comment
Share on other sites

I want to thank you both Andrea, and Falkencreative for taking a look at my pages. I am going to try applying what you told me, and try to gain more understanding by the way those things affect my pages. I tried doing some reading on overflow, and the wrapper but still don't understand either of those yet, and how they affect your pages.

Andrea told me I could set the color styling for my navigation list words in my css under #navigation. I tried #navigation ul li { property: value; } and also #navigation, ul, li { property: value; } and also #navigation { color: 00ffff; } but I didn't get any results so for the time being I left the class in my html li tags call out the color. All the background colors on the divs are there only so I could see where they were, and how they were positioned. Eventually all the background color on the divs will be gone. I tried seeing how far I could get building these pages with what I've learned in about a month, but definitely I need a ton more knowledge especially on positioning. I'm sure I haven't even scratched the surface, but having fun with this, and will keep at it.

Link to comment
Share on other sites

When I say "wrapper" I just mean using a div to enclose/group several other divs like this:

 

<div id="content">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>

This just makes dealing with positioning issues a little easier sometimes.

 

Regarding the color of your navigation, you probably need "#navigation a", since that refers to all links within #navigation. Remember there are five possible states of the link: link/hover/active/visited/focus (focus is for what happens to the link when the moves the focus there using the tab key). For more info, see http://www.tizag.com/cssT/pclass.php

Link to comment
Share on other sites

Guest Designer77

I'm a newbie coder, and have been at this for about 4 weeks. I'm practising on a radio station website I would like to get up, and running eventually. Everything seems to be positioned alright in Firefox, but when I look at what I have so far in IE, Opera, and Safari, many of the divs move out of position, and two jpegs I have don't read in the three mentioned browsers. Is there some coding that will render everything the same in these browsers as Firefox, or can someone find something wrong in the coding. I have left all the background-colors in the divs for now so I could see where they were all at. Maybe someone would be so kind as to take a look, and see what you can see. I'll be looking forward to hear what someone's findings are. Thanks !

 

 

post-29611-057116300 1288041533_thumb.jpgunsigned.htmlroot.csspost-29611-081454200 1288041480_thumb.jpgpost-29611-011272700 1288041471_thumb.jpgindex.htmldonate.htmlpost-29611-081258100 1288041439_thumb.jpgartists.htmlaboutus.html

 

Your browser compatibility problem was my biggest problem while I was a newbie. Finally, after months of research, I discovered YUI (Yahoo UI). It is a library of code that is accessed through a link in the head of your page. Now that I am using YUI, I no longer have the browser compatibility problems. Plus, many other problems have been solved.

 

There is a free website design tutorial out there with templates that have the XXXXX built in. That way you do not have to learn it yourself. You can find the website development tutorial at fXXXXXX dot com.

Edited by falkencreative
Potential spam removed
Link to comment
Share on other sites

  • 1 month later...

Just thought I would post some additonal comments and let everyone know how I came out in this postioning game of mine on my website design. First thank you Designer 77 for your suggestions. I visited the YUI website. I didn't really understand it so I took Ben's suggestion of not having to define heights and widths of my divs. However I did define the widths in percentages. I think this was the magic bullet for me. Then I was able to float everything into postion. Sometimes you have to remove a div in your html page and refloat another div to get it out of the way then put your previously removed div back into your html page in a different order, and refloat it into postion. Kinda like playing a shell game. When you play with it for a while, and see how it works it is alot of fun especially when you finally meet with success. I don't have anymore negative values to get anything into postion. I put everything inside the body of my page in a wrapper. Gave the wrapper a width of 78% and a left and right margin of auto. Also some top, and bottom margin. Now I have a neat centered page, and can put some sort of background image in the body to surround the wrapped page. I also noticed before when I was using fixed values for my div widths and negative values for positoning. My web pages seemed to hug the left side of the viewing area in Windows 7, and didn't fill out the screen. Now the pages are centered in Win 7, and fill out the viewing area. The pages also look nearly identical in different browsers. Little differences but slight. Also working on Andrea's suggestions trying to eliminate redundant stuff. Thanks everyone it's been a big help.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...