skaterdav85 Posted June 30, 2009 Share Posted June 30, 2009 Does anyone know what the default property values are for the image tag, if not equal to 0 for some of the browsers? Im noticing image gaps in some of my pages where i put a cup-up mock up images in several div tags.Also, is there any site that tells you what the different default css property values are for all the html tags for the main browsers (FF, IE, Safari)? Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2009 Share Posted June 30, 2009 You probably are referring to a little separation that appears between images vertically. You can remove it by applying "vertical-align: middle" to the CSS of the image. Link to comment Share on other sites More sharing options...
skaterdav85 Posted June 30, 2009 Author Share Posted June 30, 2009 You probably are referring to a little separation that appears between images vertically. You can remove it by applying "vertical-align: middle" to the CSS of the image.ok thanks...so what exactly is going on here? I have 2 divs side by side, both with images, and there is this small gap in between them even though i set the margin and padding to 0 on both the divs and images. Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2009 Share Posted June 30, 2009 ok thanks...so what exactly is going on here? I have 2 divs side by side, both with images, and there is this small gap in between them even though i set the margin and padding to 0 on both the divs and images.Can you show the HTML and CSS that is relevant to the problem? Link to comment Share on other sites More sharing options...
skaterdav85 Posted July 3, 2009 Author Share Posted July 3, 2009 Can you show the HTML and CSS that is relevant to the problem? <style type="text/css">body { background-color:#333;}#main { margin:10px auto; width:720px; background-color:#FFF;}div { margin:0; border:0;}#left { width:61px; height:540px; border:2px solid yellow; background-color:#F00; display:inline; vertical-align:middle;}#divider { height:540px; width:16px; display:inline; border: 2px solid yellow; display:inline; vertical-align:middle;}</style></head><body><div id="left"><img src="site_images/left_sidebar.jpg" width="61" height="540" /></div><div id="divider"><img src="site_images/divider.jpg" width="16" height="540" /></div></body></html> see how there is gap between those 2 divs that hold images...whats going on???? Link to comment Share on other sites More sharing options...
Ingolme Posted July 3, 2009 Share Posted July 3, 2009 Since you're using "display: inline", the line break in your code is adding a space between the two <div> elements. Link to comment Share on other sites More sharing options...
skaterdav85 Posted July 3, 2009 Author Share Posted July 3, 2009 Since you're using "display: inline", the line break in your code is adding a space between the two <div> elements.what line break? i dont have a line break in my code. Link to comment Share on other sites More sharing options...
Ingolme Posted July 3, 2009 Share Posted July 3, 2009 <div id="left"><img src="site_images/left_sidebar.jpg" width="61" height="540" /></div><div id="divider"><img src="site_images/divider.jpg" width="16" height="540" /></div> There are two lines of code there: that means that they're separated by a line break. If there was no line break all the code would be on one line.The line break reflects as a space between inline elements when parsed as HTML. Link to comment Share on other sites More sharing options...
skaterdav85 Posted July 3, 2009 Author Share Posted July 3, 2009 <div id="left"><img src="site_images/left_sidebar.jpg" width="61" height="540" /></div><div id="divider"><img src="site_images/divider.jpg" width="16" height="540" /></div> There are two lines of code there: that means that they're separated by a line break. If there was no line break all the code would be on one line.The line break reflects as a space between inline elements when parsed as HTML. oh ok. i didnt know that. so if i just put this all on one line of code, there would be no space and it be fine? Link to comment Share on other sites More sharing options...
Ingolme Posted July 3, 2009 Share Posted July 3, 2009 oh ok. i didnt know that. so if i just put this all on one line of code, there would be no space and it be fine?Instead of asking you could try it yourself and get the answer. To answer your question: yes, unless there's something else interfering. Link to comment Share on other sites More sharing options...
skaterdav85 Posted July 4, 2009 Author Share Posted July 4, 2009 Instead of asking you could try it yourself and get the answer. To answer your question: yes, unless there's something else interfering.well i changed my code completely, so i was curious about the old way i had it...I just changed it just by floating each div element to the right and recreating the mockup from the most right images to the left. That seemed to work better. This was the first time i sliced up a mockup site into several images and put them into a table-less layout. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.